在有生命的孩子之前动画父母

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