Javascript 尝试使单击动画可重复

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

现在它可以正常工作，但我似乎不知道如何让它多次开火。我不是一个喜欢javascript的人，所以只要朝着正确的方向推动一下就好了

谢谢
卢克

var x=1；
$（文档）.ready（函数（）{
如果（x==1）
{
x=2；
$（“#块”）。单击（函数（）
{
$（“#块”）.animate（{右：'20px'}）；
});
返回；
}
如果（x==2）
{
x=1；
$（“#块”）。单击（函数（）
{
$（“#块”）.animate（{左：'20px'}）；
});
返回；
}
});
如果该块位于左侧，则应向右滑动；如果该块位于右侧，则应向左滑动。它应该无限期地重复这种行为。现在真的很淘气

将事件绑定到if语句中，并将条件放到side事件中

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

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

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

---

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

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

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

---

您无法轻松设置

左

和

右

的动画，因为当您将

左：0

更改为

右：0

时，jQuery不知道确切的结束位置。您可以自己计算并仅使用

left

。其他事项包括：

• 使用布尔值而不是数字进行翻转
• 不要决定绑定什么事件处理程序，而是决定调用处理程序时应该发生什么
• 对当前元素使用

  $（this）

---

您无法轻松设置

左

和

右

的动画，因为当您将

左：0

更改为

右：0

时，jQuery不知道确切的结束位置。您可以自己计算并仅使用

left

。其他事项包括：

• 使用布尔值而不是数字进行翻转
• 不要决定绑定什么事件处理程序，而是决定调用处理程序时应该发生什么
• 对当前元素使用

  $（this）

---

这和你想要的一样吗

---

这和你想要的一样吗

---

如果要有多个条，那么在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'});

       }
     });
   });

---

演示

如果要有多个条，那么在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'});

       }
     });
   });

---

演示

单击两下后，元素将同时获得

right

和

left

CSS规则，并且它将不再更新。演示显示它将在0和20之间设置左侧位置的动画，而不会设置右侧：20谢谢，这样做了。我还决定把剩下的一切都放在一边，以彻底解决这个问题。再次感谢，JSFIDLE是一个很棒的工具，我以前不知道，现在我会经常使用它。Thank单击两下后，元素将同时获得

right

和

left

CSS规则，并且它将不再更新。演示显示它在0和20之间设置左侧位置的动画，而不是右侧：20谢谢，这样做了。我还决定把剩下的一切都放在一边，以彻底解决这个问题。再次感谢，JSFIDLE是一个很棒的工具，我以前不知道，现在我会经常使用它。谢谢