尝试使点击动画可重复

Question

我在试着做一个水平滑动的横杆。如果它位于左侧，它将向右滑动。如果它位于右侧，它将向左滑动。最终，这将包含多个并排的条，这些条将滑出以显示不同的图像。

现在，它可以很好地工作，除了我似乎不知道如何让它多次启动。我不是一个喜欢javascript的人，所以只要在正确的方向上稍微推动一下就好了。

谢谢

卢克

    <!DOCTYPE html>
    <html>
    <head>
    <script src="jquery.js"></script>
    <script>
    var x=1;
    $(document).ready(function(){
      if( x==1 )
      {
        x=2;
        $("#block").click(function()
         {
          $("#block").animate({right:'20px'});
         });
        return;
      }

      if( x==2 )
      {
        x=1;
        $("#block").click(function()
         {
          $("#block").animate({left:'20px'});
         });
        return;
      }


    });
    </script>
    </head>



    <body>

    <p> This block should slide right if it's positioned left, and slide left if it's positioned right. It should repeat this behavior indefinitely. Right now it's being very naughty indeed!</p>

    <div id=block style="background:#98bf21;height:100px;width:16px;position:absolute;">
    </div>

    </body>
    </html>

Answer 1

将事件绑定到if语句之外，并将条件放入副事件中。

$(document).ready(function(){
    var x=1;           
    $("#block").click(function()
    {
       if( x==1 )
       {
           x=2;
           $("#block").animate({right:'20px'});
       }
       else
       {
           x=1;
           $("#block").animate({left:'20px'});
       }
     });
 });

要保持规则循环，您可能需要更改代码，如下所示

$(document).ready(function() {
    var x = 1;
    $("#block").click(function() {
        if (x == 1) {
            x = 2;
            $("#block").animate({
                right:  '20px',
                 left: '0px'
            });
        }
        else {
            x = 1;
            $("#block").animate({
                left: '20px',
                 right:  '0px'
            });
        }
    });
});​

Answer 2

您不能轻松地为left和right设置动画，因为当您将left: 0更改为right: 0时，jQuery不知道确切的结束位置。你能做的就是自己计算，并且只使用left。其他一些东西是：

• 使用布尔值而不是数字进行翻转并不决定要绑定哪个事件处理程序，而是决定当该处理程序被调用时应该发生什么情况
• 将$(this)用于当前元素

http://jsfiddle.net/HZRWJ/

$(document).ready(function(){
    var isLeft = true;
    $("#block").click(function() {
        var fullWidth = $(document).width();
        var elemWidth = $(this).width();
        if(isLeft) {
            $(this).animate({ left: fullWidth - elemWidth });
        } else {
            $(this).animate({ left: 0 });
        }
        isLeft = !isLeft;
     });
});

Answer 3

这是否与您想要的功能类似？

$("#block").data('position', 'left');
$("#block").click(function() {
    var elem = $(this);
    resetElementPosition(elem);
    switch (elem.data('position')) {
        case 'left': elem.animate({ right: '20px' }); elem.data('position', 'right'); break;
        case 'right': elem.animate({ left: '20px' }); elem.data('position', 'left'); break;
        }
});

function resetElementPosition(element)
{
    element.css({ 'left' : 'auto', 'right' : 'auto' });
}