Css3 Animations Slide-in Div

Question

I'm creating an html file with the basic structure of this:

Solution 1:

Here is a jquery solution (Since you have said yes to the jquery solution in comments)

$(".next").click(function(){
  var current = $(".container").css("left");
  if(current == "-100px"){
    current="-200px";
  }
  elseif(current == "0px"){
    current="-100px";
  }
  $(".container").css("left",current);
});
$(".prev").click(function(){
  var current = $(".container").css("left");
  if(current == "-100px"){
    current="0px";
  }
  elseif(current == "-200px"){
    current="-100px";
  }
  $(".container").css("left",current);});

.row{
  border:1px solid black;
  height:100px;
  margin:0;
  width:100px;
  padding:0;
  display:block;
  position:relative;
  overflow:hidden;
}
.container{
  height:100px;
  margin:0;
  width:300px;
  padding:0;
  display:block;
  position:absolute;
  left:-100px;
  top:0;
  -webkit-transition:left0.5s ease-in-out;
  -moz-transition: left 0.5s ease-in-out;
  transition: left 0.5s ease-in-out;
}
.ins{
  width:100px;
  float:left;
  height:100px;
  margin:0;
  padding:0;
  background-color:red;
}
.div2{
  background-color:green;
}
.div3{
  background-color:blue;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="row"><divclass="container"><divclass="ins div1">div-1</div><divclass="ins div2">div-2</div><divclass="ins div3">div-3</div></div></div><buttonclass="prev">prev</button><buttonclass="next">next</button>

EDIT : After the updated question

First problem is that you are adding your <style>....</style> in the body. You should add it in head.

Second problem is that you are adding <script>..</script> before your html content. All the scripts should be in the last of your body. Just before ending body tag, that is </body>

Baca Juga

Another solution to the second problem is wrapping your javascript code in $(document).ready(function(){ Insert the code here });. I have done that in the below snippet.

<!DOCTYPE html><html><!-- Thanks to kittyCat at stackoverflow.com for helping me with this website.--><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>TITLE</title><metaname="Title"content="Main"><style>.row{
          border:1px solid black;
          height:100px;
          margin:0;
          width:100px;
          padding:0;
          display:block;
          position:relative;
          overflow:hidden;
        }
        .container{
          height:100px;
          margin:0;
          width:300px;
          padding:0;
          display:block;
          position:absolute;
          left:-100px;
          top:0;
          -webkit-transition:left0.5s ease-in-out;
          -moz-transition: left 0.5s ease-in-out;
          transition: left 0.5s ease-in-out;
        }
        .ins{
          width:100px;
          float:left;
          height:100px;
          margin:0;
          padding:0;
          background-color:red;
        }
        .div1 {
            background-color: red;
        }
        .div2{
          background-color:green;
        }
        .div3{
          background-color:blue;
        }
    </style></head><body><divclass="row"><divclass="container"><divclass="ins div1">div-1</div><divclass="ins div2">div-2</div><divclass="ins div3">div-3</div></div></div><buttonclass="prev">prev</button><buttonclass="next">next</button><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>
      $(document).ready(function(){
        $(".next").click(function(){
          var current = $(".container").css("left");
          if(current == "-100px"){
            current="-200px";
          }
          elseif(current == "0px"){
            current="-100px";
          }
          $(".container").css("left",current);
        });
        $(".prev").click(function(){
          var current = $(".container").css("left");
          if(current == "-100px"){
            current="0px";
          }
          elseif(current == "-200px"){
            current="-100px";
          }
          $(".container").css("left",current);});
      });
    </script></body></html>

Html5 Dictionary

Css3 Animations Slide-in Div

Solution 1:

Post a Comment for "Css3 Animations Slide-in Div"