2013-05-09 167 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() {}}); 
相關問題