JQuery幻灯片功能无法正常工作答案

【问题标题】：JQuery Slide Function Not Working RightJQuery幻灯片功能无法正常工作
【发布时间】：2013-06-25 01:02:14
【问题描述】：

我正在制作一个下拉菜单，但下拉部分有问题。如果按一次按钮，它会起作用，但有时它会发疯，如果我继续按一次，就会多次下降。我的代码...

<script>
  $(document).ready(function() {
  var par = $('#subitem');
  $(par).hide();
  $('#barbox').mouseover(function(a) {
      $(par).slideToggle(300);
      a.preventDefault();
  });
  $(par).mouseleave(function(a) {
      $(par).slideToggle(300);
  });
});
</script>

您可以在我的site 上看到问题，只需转到服务选项卡并在那里用鼠标闲逛。

【问题讨论】：

标签： jquery html user-interface mouse mouseover

【解决方案1】：

你的动画发疯的原因是 Jquery 中的动画队列。

您要做的是在执行 slideToggle 事件之前停止队列，如下所示：

<script>
  $(document).ready(function() {
  var par = $('#subitem');
  $(par).hide();
  $('#barbox').mouseover(function(a) {
      $(par)
.stop(true, true).slideToggle(300);
      a.preventDefault();
  });
  $(par).mouseleave(function(a) {
      $(par)
.stop(true, true).slideToggle(300);
  });
});
</script>

查看此链接了解更多信息：http://api.jquery.com/stop/

【讨论】：

【解决方案2】：

尝试将所有事件放在同一个函数中，如下所示：

$('#subitem').mouseenter(function(){
      $('#subitem').slideToggle(300);
      a.preventDefault();
    }).mouseleave(function(){
      $('#subitem').slideToggle(300);
    });

【讨论】：

【解决方案3】：

您应该先修复您的 HTML。您在表的每个 td 上使用相同的 id。链接也一样。 id 是唯一的，因此您应该改用一个类。

【讨论】：