如何使用jquery连续点击动画

基本上我希望能够点击一个div，让它向左移动50px，再次点击它，让它向下移动50px，再次点击它并向右移动50px，并再次点击它，让它回到原来的位置，这样如果我第五次单击它，循环再次开始。我已经阅读了关于jQuery的完整书籍，但对此我仍然很陌生。我尝试使用if语句来检查div的css，并且如果它是这样，那么它会将其设置为正确的位置，但问题是，使用jquery动画化对象不会改变它的CSS，所以我wouldn在下一次将它移动到下一个位置时，无法检查它的CSS。现在，我可能与if语句完全错误的轨道上。我不需要有人为我写代码，只是寻找正确的IDEA。是否有我应该注意的处理程序？我需要捕捉的事件？这种类型的事情通常如何处理jQuery？如何使用jquery连续点击动画

总结一下：如何在jQuery中连续点击时以循环方式（超过两个动画）制作对象动画？

来源

2013-05-06 wetjosh

这里是你如何做到这一点：

var n = 0; 
$('#target').on('click', function() { 
    n++; 
    if (n == 5) { 
     n = 1; 
    } 
    if (n == 1) { 
     $(this).animate({ 
      'top': '-=50' 
     }); 
    } 
    if (n == 2) { 
     $(this).animate({ 
      'left': '+=50' 
     }); 
    } 
    if (n == 3) { 
     $(this).animate({ 
      'top': '+=50' 
     }); 
    } 
    if (n == 4) { 
     $(this).animate({ 
      'left': '-=50' 
     }); 
    } 
});

现场演示：http://jsfiddle.net/tkirda/Yt6kJ/

来源

2013-05-06 05:16:35

，我的朋友，是一个惊人的答案。我从来没有想过'if（n == 5）{n = 1;}'部分。天才。谢谢你，谢谢你，谢谢你！ – wetjosh 2013-05-06 07:02:30

如何使用jquery连续点击动画

回答

相关问题