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语句绑定，并将条件置于副事件中。

<强> Live Demo

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

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

<强> Live Demo

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

这是否与您想要的类似？

Fiddle Demo

$("#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'});

       }
     });
   });

演示here

试图使点击动画可重复

4 个答案: