javascript - Trying to make a click animation repeatable

Question

I'm trying to make a bar that slides horizontally. If it's positioned left, it will slide right. If it's positioned right, it will slide left. Eventually this will contain multiple bars side by side that will slide out of the way to reveal different images.

right now it would work fine except i can't seem to figure out how to get it to fire more than once. I'm not a javascript guy by any stretch of the imagination, so just a little push in the right direction would be appreciated.

Thanks
Luke

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

score 3 · Accepted Answer

将事件绑定到 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'
            });
        }
    });
});

score 0 · Accepted Answer

您不能轻松地为 and 设置动画left，right因为当您更改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;
     });
});

score 0 · Accepted Answer

如果您将有多个条形图，则将值存储在 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'});

       }
     });
   });

演示在这里

score 0 · Accepted Answer

这是否与您想要的类似？

小提琴演示

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

javascript - Trying to make a click animation repeatable

4 回答 4

Related

Reference