Question

请看一下：

如果单击右键，则框向右移动;如果单击左键，则框向左移动。但是如果你再次点击右边，没有...

我怎样才能让它在我喜欢的情况下左右移动多次而不是在一轮中工作然后不再工作？

另外，如果你先左转，然后再右转它也会搞砸，怎么解决？

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

第二次尝试动画时，它已经从第一个动画中留下了30px左右定位。

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

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

非常简单的使用

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

Answer 3

您也可以只说左：'-= 25px'

样本

    <script>

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

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

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

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


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

        });

    </script>

如何使用jQuery animate（）方法使div左右移动？

3 个答案: