jQuery 动画 div 向下滑动而不是显示

Question

我发现了一个 fiddle 接近做我需要它做的事情但我需要它来动画 div 的进出而不是仅仅显示 div鼠标悬停在没有任何东西悬停时全部消失。

这是 jQuery...

$(document).ready(function(){
$("#nav a").click(function(){
  var id =  $(this).attr('id');
  id = id.split('_');
  $("#menu_container div").hide(); 
  $("#menu_container #menu_"+id[1]).show();
});
});

这是fiddlehttp://jsfiddle.net/KUtY5/1/

Answer 1

我建议对目标元素使用 data- 属性来简化代码（而不是使用 ID 字符串的拆分）：

JSFiddle: http://jsfiddle.net/TrueBlueAussie/KUtY5/360/

$(document).ready(function () {
    $("#nav a").mouseenter(function () {
        var $target = $($(this).data('target'));
        $("#menu_container div").not($target).slideUp();
        $target.slideDown();
    });
    $("#nav a").mouseleave(function () {
        $("#menu_container div").slideUp();
    });

});

如果您在所有菜单项上移动得非常快，您可能会在彼此之上获得多个 div。我还建议使用样式将它们直接放在彼此之上，而不是避免这种情况。

同时使用stop来防止动画多次排队和弹跳div open/closed:

$("#menu_container div").not($target).stop().slideUp();

和

$("#menu_container div").stop().slideUp();

http://jsfiddle.net/TrueBlueAussie/KUtY5/361/

jQuery 动画 div 向下滑动而不是显示

jQuery animate div to slide down instead of show

jquery

jquery-animate