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

Posted 2023-05-08

【中文标题】Jquery问题：第一次点击后试图停止动画

【英文标题】：Jquery problem: trying to stop an animation after first click

【发布时间】：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");

【参考方案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');

在每个方法的末尾。