Question

我使用jQuery slideDown函数创建了一个菜单，一切似乎都运行正常，但有时当你快速移动按钮实现子菜单出现在slideDown效果之前。

Web工具显示它是因为“display block”的应用速度比height更快。

有谁知道解决方案？这是我的代码：

$( document ).ready(function() {
  var submenu = $("#sub-menu"),
      activeSlide = $("#active"),
      startPos = activeSlide.position().left;

  $("#parent").hover(
    function() {
      submenu.stop(true, false).slideDown( 600);
    },
     function() {
      submenu.stop(true, false).slideUp( 600);
    });

  $(".nav > li").mouseenter(function() {
    var nextPos = $(this).position().left + startPos;
    activeSlide.animate({left: nextPos}, 250);
  });

   $(".nav").mouseleave(function() {
    activeSlide.animate({left: startPos}, 250);
  });

});// end ready

DEMO

Answer 1

您可以测试此代码。

$( document ).ready(function() {
  var submenu = $("#sub-menu"),
      activeSlide = $("#active"),
      startPos = activeSlide.position().left;


  $("#parent").hover(
    function() {
      submenu.stop(true, true).slideDown( 600);
    },
     function() {
      submenu.stop(true, true).slideUp( 600);
    });

  $(".nav > li").mouseenter(function() {
    var nextPos = $(this).position().left + startPos;

    activeSlide.stop().animate({left: nextPos}, 250);
  });

   $(".nav").mouseleave(function() {

    activeSlide.stop().animate({left: startPos}, 250);
  });

});// end ready

Answer 2

动画制作时需要添加.stop()。

activeSlide.stop().

Answer 3

将stop(true,false)更改为stop(true,false)

$("#parent").hover(
    function () {
        submenu.stop(true, true).slideDown(600);
    },
    function () {
        submenu.stop(true, true).slideUp(600);
    });

.stop()第一个参数'清除队列'，第二个参数将使动画'跳转到结束'。

.stop([clearQueue],[]jumpToEnd)

以下是更多信息的链接：http://api.jquery.com/stop/

Answer 4

父母悬停功能的简单更改

$("#parent").hover(
function() {
  submenu.stop(true, false).slideDown( 600);
},
 function() {
  submenu.stop(true, false).slideUp( 600).hide();
});

在幻灯片后使用隐藏功能。请立即测试。

JQuery slideDown函数和display：block？

4 个答案: