jQuery的動畫格向下滑動而不是顯示

Question

我發現了一個小提琴接近做我需要它，而不是隻顯示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(); 
}); 
}); 

這裏的是小提琴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放在一起。我還建議使用造型將它們全部直接放在彼此的頂部，而不是爲了避免這種情況。

還可以使用停止，防止動畫排隊多次和彈跳的div開啓/關閉：

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

和

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

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