jquery - JQuery slideDown function and display: block?

Answer 1

Can you test this code.

$( 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();
});

上滑后使用隐藏功能。请现在测试一下。