Question

我找到了一个接近于做我需要它的小提琴，但不是仅仅显示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();
});
});

这里是小提琴http://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打开/关闭：

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

和

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

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

jQuery动画div下滑而不是显示

1 个答案: