jQuery下拉菜單上的幻燈片效果

Question

我創建了jQuery的下拉菜單中像這樣 。 我想在下拉菜單上添加幻燈片效果。 同時，如果將鼠標懸停在菜單選項卡上，則子菜單現在已打開，與菜單選項卡相比，看起來好像又上了一步。 我需要滑動像這樣 。 我在這里添加了我的腳本。

function mainmenu() {
    jQuery(" #na1").hover(function () {
//alert("hai-2");
        jQuery(this).find('#content1').slideDown("fast");
    }, function () {
        jQuery(this).find('#content1').slideUp("fast");
    });
}

$(document).ready(function () {
    mainmenu();
}); 

提前致謝

Answer 1

$(document).ready(function () {
    $("#na ul li").hover(function () {
         $(this).siblings().find('ul').slideUp(400);
         $(this).find('ul').slideDown(400);        
    }, function () {
       $(this).find('ul').slideUp(400);
    });
});

演示：

http://jsfiddle.net/QkbDg/1/

Answer 2

嘗試這個

$(document).ready(function () {
    jQuery("#na ul li a").hover(function () {
        jQuery(this).next('ul').slideDown(350);
    }, function () {
        jQuery(this).next('ul').slideUp(350);
    });
});

DEMO

Answer 3

嘗試這個：

function mainmenu(){
    jQuery(" #na1").hover(function(){
        jQuery(this).find('#content1').stop().slideDown("fast");
    },function(){
        jQuery(this).find('#content1').stop().slideUp("fast");
    });
}

$(document).ready(function()
{
    mainmenu();
}); 

Answer 4

嘗試這個

function mainmenu(){
jQuery(".topm").hover(function(){
//alert("hai-2");
jQuery(this).find('.content').stop().slideDown("fast")
},function(){
jQuery(this).find('.content').stop().slideUp("fast");
});
}

$(document).ready(function()
{
mainmenu();
}); 

演示： 這里