Jquery问题：第一次点击后试图停止动画答案

【问题标题】：Jquery problem: trying to stop an animation after first clickJquery问题：第一次点击后试图停止动画
【发布时间】：2010-12-16 00:35:30
【问题描述】：

Jquery newbie here =) 所以我有一个代码可以将菜单 div 向右滑动，问题是我不希望菜单在第一次单击任何这些 div 后继续执行动画。我试过 return false 但没有帮助。代码如下：

$(document).ready(function(){

  $("#menu_home").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");

  });

  $("#menu_portfolio").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");
  });

  $("#menu_us").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");
  });

  $("#menu_blog").click(function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
      $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
      $("#menu_us").animate({"left": "+=210px"}, "slow");
      $("#menu_blog").animate({"left": "+=104px"}, "slow");
  });

});

【问题讨论】：

您可能想要缓存您正在重复的选择器。例如： var menu_home = $("#menu_home");然后你可以像这样访问它们： menu_home.animate({"left": "+=419px"}, "slow");

标签： jquery click jquery-animate

【解决方案1】：

您应该熟悉 jQuery 的 one() 事件。它只会触发一次。

 // bind event to each matched element
 $("#menu_home, #menu_portfolio, #menu_us, #menu_blog").one('click', function(){
    $("#menu_home").animate({"left": "+=419px"}, "slow");
    $("#menu_portfolio").animate({"left": "+=313px"}, "slow");
    $("#menu_us").animate({"left": "+=210px"}, "slow");
    $("#menu_blog").animate({"left": "+=104px"}, "slow");
    // unbind event so remainder of elements wont fire event
    $("#menu_home, #menu_portfolio, #menu_us, #menu_blog").unbind('click');
 });

【讨论】：

谢谢你，这正是我所需要的！
既然你unbind()，那么使用one() 和click() 这样做没有区别。
我认为值得一提的功能。我最初也没有注意到每个动画都完全相同。取消绑定是修复错误的后期添加。

【解决方案2】：

您需要从元素中取消绑定点击事件。你可能想要

$("#menu_home, #menu_portfolio, #menu_us, #menu_blog").unbind('click');

在每个方法的末尾。

【讨论】：