试图使点击动画可重复

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 ，因为jQuery不知道确切的结束位置，当你改变left: 0到right: 0 。 您可以做的是自己计算并仅使用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' });
}

Answer 4

如果要使用多个条，则将值存储在jQuery对象中可能会更容易。

$(document).ready(function(){

   $("#block").each( function( ) {

       // associate data with each element. At the moment there should 
       // only be one but if this is implemented as a class there may
       // be more
       $(this).data("x", 0);

   });

   $("#block").click( function( ) {

       // 0 will push it to the right as 0 => false
       if( $(this).data("x") ) { 

           $(this).data("x", 0 );

           // removing the css property allows you to use left & right
           $(this).css("right","").animate({left:'20px'});

       } else {

           $(this).data("x", 1 );

           $(this).css("left","").animate({right:'20px'});

       }
     });
   });

在这里演示

试图使点击动画可重复

问题描述

4 个解决方案

解决方案1
3 已采纳 2012-11-14 14:47:16

解决方案2
0 2012-11-14 14:54:24

解决方案3
0 2012-11-14 15:00:55

解决方案4
0 2012-11-14 15:19:13

试图使点击动画可重复

问题描述

4 个解决方案

解决方案1 3 已采纳 2012-11-14 14:47:16

解决方案2 0 2012-11-14 14:54:24

解决方案3 0 2012-11-14 15:00:55

解决方案4 0 2012-11-14 15:19:13

解决方案1
3 已采纳 2012-11-14 14:47:16

解决方案2
0 2012-11-14 14:54:24

解决方案3
0 2012-11-14 15:00:55

解决方案4
0 2012-11-14 15:19:13