2013-05-09 168 views
0

我正在为弹出式菜单设置动画,以便它们同时淡入淡出。我想在隐藏弹出框的位置重置隐藏弹出框的位置,以便动画每次都是相同的。为什么我的post-animate函数没有被调用?

当元素翻转时,弹出式窗口向下滑动并淡入。当窗口翻出时,弹出式窗口进一步向下滑动并淡出,然后在隐藏时将其自身重置为初始位置。

这里是我的代码:

$('*:has(.rollover)').hover(function(){ 
    $('.rollover',this).fadeIn('fast').animate({ 
    'top' : '60px', 
    }, {duration: 'fast', queue: false}, function() {}); 
},function(){ 
    $('.rollover',this).fadeOut('fast').animate({ 
    'top' : '70px', 
    }, {duration: 'fast', queue: false}, function() { 
    console.log("hello"); 
    $(this).css('top','50px'); 
    }); 
}); 

的问题是最后一行,其中top复位没有被触发,也不是日志语句。为什么是这样?

+0

附加一个事件处理具有与类.rollover可能意味着该事件对要素的任何元件的安装到几乎页面上的每个元素,这听起来像一个非常糟糕的主意。你可以用这样的事情简化它[** FIDDLE **](http://jsfiddle.net/Pmbr8/) – adeneo 2013-05-09 11:47:24

+0

@adeneo我使用'*:has(.rollover)'来选择所有具有作为直系孩子的'.rollover',这是错的吗? – fredley 2013-05-09 11:50:51

+0

该选择器将选择包含至少一个匹配指定选择器的元素的任何元素,而不限于直接子元素。换句话说,任何元素都包含一个元素,其中包含类.rollover,这可能仅仅是页面上的每个元素。 – adeneo 2013-05-09 14:02:08

回答

0

我的错误是有:

, {duration: 'fast', queue: false}, function() {}); 

当我应该有:

, {duration: 'fast', queue: false, complete : function() {}}); 
相关问题