jQuery анимация div для слайд вниз, а не для показа

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 друг на друга. Я также рекомендую использовать стиль, чтобы поместить их все непосредственно друг на друга, чтобы избежать этого.

также использовать остановку, чтобы предотвратить анимацию очереди несколько раз и подпрыгивая дивы открыто/закрыто:

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

и

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

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