下拉菜单上的JQuery幻灯片效果

时间:2014-04-09 07:29:13

标签: javascript jquery css drop-down-menu

我创建了像this这样的jquery下拉菜单。我想在下拉菜单中添加幻灯片效果。同时,如果我将鼠标放在菜单选项卡上,则子菜单现在打开,看起来与菜单选项卡相比只有一步。我需要幻灯片this。我在这里添加了我的剧本。

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();
}); 

提前致谢

4 个答案:

答案 0 :(得分:5)

$(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/

答案 1 :(得分:1)

试试这个

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

DEMO

答案 2 :(得分:0)

试试这个:

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();
}); 

答案 3 :(得分:0)

试试这个

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();
}); 

演示:here