CODEWITHSUNDEEP
jquery
Remy
Remy

Reputation: 53

How to make div move right and left using jQuery animate() method?

Please take a look at this:

http://jsfiddle.net/tmPfV/

If you click right the box moves right and if you click left the box moves left. However if you click right again, nothing...

How can I get it to move right and left as many times as I like instead of it working for one round and then not working again?

Also if you clock left first and then right it also messes up, how to solve that?

jquery:

            $('.right').click(function(e) {
                e.preventDefault();
                $('#foo').animate({
                    'right' : '30px'    
                });                 
            });
            $('.left').click(function(e) {
                e.preventDefault();
                $('#foo').animate({
                    'left' : '30px'
                });                 
            });

html:

        <a href="" class="left">left</a> | <a href="" class="right">right</a>
        <br /><br />
        <div id="foo" style="background:red;width:100px;height:100px;position:absolute"></div>

Upvotes: 5

Views: 49855

Answers (3)

Jebjosh
Jebjosh

Reputation: 93

You can also just say left:'-=25px'

sample

    <script>

        $("document").ready(function(){

            $(".left").click(function(){

                $(".box").animate({ left: '+=25px'  }); });

            $(".right").click(function(){

                $(".box").animate({ left: '-=25px'  }); });

        });

    </script>

Upvotes: 0

Shwet
Shwet

Reputation: 1868

very simple use

<script src="jquery.min.js"></script>
 <script src="jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
  $("#flip").click(function () {
          $("#left_panel").toggle("slide", { direction: "left" }, 1000);
    });
});
</script>

Upvotes: 0

Joe
Joe

Reputation: 15802

The second time it tries to animate, it already has 30px right positioning left over from the first animation.

As to why it jumps at the start of the left animation; the body has padding, so by default the sliding block is indented with padding. When we set the left property to 0 at the beginning of the animation, it jumps outside the padding (to the absolute position of 0px left). Apply a body padding of 0px to fix it.

http://jsfiddle.net/MbJJ6/

            $('.right').click(function(e) {
                e.preventDefault();
                $('#foo').css({ 'right': '0px', 'left': '' }).animate({
                    'right' : '30px'    
                });                    
            });
            $('.left').click(function(e) {
                e.preventDefault();
                $('#foo').css({ 'right': '', 'left': '0px' }).animate({
                    'left' : '30px'
                });                    
            });

Upvotes: 7

Related Questions