How to move div horizontally

Question

I am trying to the div box with image move left to right,

I tried another script: http://jsfiddle.net/bala2024/MzHmN/

Here is the html code

<!DOCTYPE html>
<html>    
    <head></head>    
    <body style>
        <div id="slideleft" class="slide">
            <button>slide it</button>
            <div class="inner">Slide to the left</div>
            <div style="width:50px; height:50px">
                <img src="sceen.jpg">
            </div>
        </div>
    </body>

</html>

CSS

.slide {
    position: relative;
    background-color: gray;
    height: 100px;
    width: 500px;
    overflow: hidden;
}
.slide .inner {
    position: absolute;
    left: -500px;
    bottom: 0;
    background-color:#e3e3e3;
    height: 30px;
    width: 500px;
}

JS

 $(document).ready(function () {
     $('#slideleft button').click(function () {
         var $lefty = $(this).next();
         $lefty.animate({
             left: parseInt($lefty.css('left'), 10) == 0 ? -$lefty.outerWidth() : 0
         });
     });
 });

Answer 1

You will need to apply width to main container. Please replace it with below line and check in your browser.

 <div id="slideleft" class="slide" style="width:100px; margin:0 auto">

Answer 2

use margin for outer space and padding for inner space try this

<!DOCTYPE html>
<html>
<head>  
</head>
<body style>
    <div id="slideleft" class="slide">
        <button>slide it</button>
        <div class="inner">Slide to the left</div>
        <div style="width:50px; height:50px; margin-left: 100px;"><img src="sceen.jpg">
       </div>         
    </div>   
</body>
</html>

Answer 3

Click the following link to watch live demo... Click Here

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Animation test</title>
<style>

</style>
<script type="text/javascript">
$(document).ready(function() {
    $("#b").animate({left: "+=500"}, 2000);
    $("#b").animate({left: "-=300"}, 1000);
});

</script>
</head>

<body>
<div style="position:relative">
    <div id="b" style="position:absolute;">B</div>
</div>
</body>
</html>

Answer 4

CSS:

div.inner{
background:black;
margin-left:0;
width:100px;
animation:sample 2s;
-webkit-animation:sample 2s;
}
keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}
@-webkit-keyframes sample{
from{margin-left:100%;}
to{margin-left:0%;}
}

fiddle: http://jsfiddle.net/apRMU/17/

How to move div horizontally

Question

4 answers

solution1
1 2013-10-03 06:02:21

solution2
0 2013-10-03 06:04:30

solution3
0 2013-10-03 07:07:14

solution4
-1 ACCPTED 2013-10-03 06:06:13

How to move div horizontally

Question

4 answers

solution1 1 2013-10-03 06:02:21

solution2 0 2013-10-03 06:04:30

solution3 0 2013-10-03 07:07:14

solution4 -1 ACCPTED 2013-10-03 06:06:13

solution1
1 2013-10-03 06:02:21

solution2
0 2013-10-03 06:04:30

solution3
0 2013-10-03 07:07:14

solution4
-1 ACCPTED 2013-10-03 06:06:13