如何使用 jQuery animate() 方法使 div 左右移动？答案

【问题标题】：How to make div move right and left using jQuery animate() method?如何使用 jQuery animate() 方法使 div 左右移动？
【发布时间】：2011-09-10 03:13:08
【问题描述】：

请看这个：

http://jsfiddle.net/tmPfV/

如果你点击右，框向右移动，如果你点击左，框向左移动。但是，如果您再次单击右键，则什么都没有...

我怎样才能让它按我喜欢的次数向右和向左移动，而不是让它工作一轮然后再不工作？

另外，如果你先左后右时钟也乱了，怎么解决？

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>

【问题讨论】：

标签： jquery

【解决方案1】：

它第二次尝试动画时，它已经比第一个动画留下了 30px 的右侧定位。

至于为什么它在左侧动画开始处跳转；主体有填充，所以默认情况下，滑块缩进有填充。当我们在动画开始时将left 属性设置为 0 时，它会跳到 padding 之外（到左侧 0px 的绝对位置）。应用 0px 的 body padding 来修复它。

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'
                });                    
            });

【讨论】：

这种方法始终如一，但它没有很好的滑动效果。有没有办法在保留滑动效果的同时来回使用animate()？
这取决于您希望它如何工作，我只是复制了您小提琴中的功能 :) 当您单击左/右时，您是否试图让它在屏幕上一直滑动？跨度>

【解决方案2】：

非常简单的使用

<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>

【讨论】：

【解决方案3】：

你也可以只说left：'-=25px'

样本

    <script>

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

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

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

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

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

        });

    </script>

【讨论】：