5

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>
Remy
  • 53
  • 1
  • 1
  • 3

3 Answers3

7

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'
                });                    
            });
Joe
  • 15,669
  • 4
  • 48
  • 83
  • this works consistently but it doesn't have the nice sliding effect. Is there no way to use animate() back and forth while retaining the sliding effect? – Remy Sep 10 '11 at 03:29
  • It depends how you want it to work, I just replicated the functionality from your fiddle :) Are you trying to get it to slide all the way across the screen when you click left/right? – Joe Sep 10 '11 at 03:30
0

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>
Shwet
  • 1,848
  • 1
  • 24
  • 35
0

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>
Jebjosh
  • 83
  • 8