mouseover mouseout不能在多个ul上运行动画

时间:2012-05-03 14:07:01

标签: jquery menu jquery-animate mouseover mouseout

有人知道如何使我的脚本适用于多个ul吗?

请查看my jsfiddle 如您所见,该脚本仅适用于鼠标悬停时的第二个ul。

先谢谢你!
亲切的问候,
乔纳森

1 个答案:

答案 0 :(得分:2)

让我解释一下,发生了什么。你只是选择了最后创建的div,所以只有那个人去了。

我必须找到所选的.active和所选的div

以下是示例:

http://jsfiddle.net/JoshuaPack/YFUsJ/23/

mouseover我将此页面添加到顶部以更改activeanimation vars

    active = $(this).parent().find('.active');
    animation = $(this).parent().find('div');

mouseout我添加了这个。

    active = $(this).find('.active');
    animation = $(this).find('div');

修改 对于将班级active移至其他<li>个对象的问题,您必须分别为每个<div>班级附加.active 这是一个例子:

http://jsfiddle.net/JoshuaPack/YFUsJ/31/

我所做的是将动画变量包装成.each

$.each(active, function() {
    var animation = $('<div>').css({
        'position': 'absolute',
        'height': $(this).outerHeight()-1,
        'width': $(this).outerWidth(),
        'marginTop': ($(this).parent().index() * $(this).outerHeight()),
        'borderBottom': '1px solid #000',
        'z-index': -10
    });
    $(this).parent().parent().prepend(animation);
});

相反或前置<ul>之前,我做了父母的父母,父母的父母应该总是那里有一个类active的菜单。