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

Question

Please take a look at this:

http://jsfiddle.net/tmPfV/

If you right-click, the window will be moved to the right, and if you click on the left, the window will move to the left. However, if you right-click again, nothing ...

How can I make him move left and right as many times as I like and not work for one round and then not work again?

Also, if you press the clock first and then right, it will also go bad, how to solve it?

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> 

Answer 1

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

As to why he jumps at the beginning of the left animation; the body is indented, so by default a sliding block is indented. When we set the left property to 0 at the beginning of the animation, it jumps beyond the padding (to the absolute position 0px on the left). Apply 0px body overlay 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' }); }); 

Answer 2

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>