有動畫的孩子之前動畫父親

Question

我有一個#parent包含隱藏的#child。當我將鼠標懸停在#parent上時，我想要fadeIn()這個孩子。這樣可行。

$(document).on("mouseenter", "#parent", function() { 
    $(this).find("#child").fadeIn(); 
}); 

$(document).on("mouseleave", "#parent", function() { 
    $(this).find("#child").fadeOut(); 
}); 

現在，在#child淡入之前，我該如何首先將#parent設置爲正確尺寸的動畫？

我創建了一個fiddle來展示我的意思。 現在，當#child淡入時#parent剛剛「彈出」。

任何幫助？

Answer 1

嘗試使用母公司的call back，

$(document).on("mouseenter", "#parent", function() { 
    $(this).animate({ 
     "height": "50" 
    }, 500, function() { 
     $(this).find("#child").fadeIn(); 
    }) 
}); 

$(document).on("mouseleave", "#parent", function() { 

    var parent = $(this); 

    parent.find("#child").fadeOut(500, function() { 
     parent.animate({ 
      "height": "10" 
     }, 500) 
    }); 
}); 

DEMO

---

對於你的新的要求，你必須利用.data()的存儲原始高度

剛嘗試，

var parent = $('#parent'); 
parent.data('height', parent.height()); 
var child = parent.find('#child').hide(); 

$(document).on("mouseenter", "#parent", function() { 
    parent.animate({ 
     "height": parent.data('height') 
    }, 500, function() { 
     child.fadeIn(); 
    }) 
}); 

$(document).on("mouseleave", "#parent", function() { 

    child.fadeOut(500, function() { 
     parent.animate({ 
      "height": "10" 
     }, 500) 
    }); 
}); 

DEMO