jquery - 淡出孩子然后为 div 的高度设置动画

Question

我试图让 div 的孩子淡出然后为 div 本身的高度设置动画，我在 jsFiddle 中尝试过，但它不起作用，并且出现了一些奇怪的线条......任何人都可以帮助我吗？

http://jsfiddle.net/kPq6J/7/

Answer 1

我认为你想要做的是在这个小提琴中捕捉到：http: //jsfiddle.net/f3Lpv/1/

$(document).ready(function() {
    $("#toggleid").click(function() {
        var child = $("#child");

        if(child.is(":visible")) {
            child.fadeTo(500, 0.0, function() {
                child.slideUp();
            });
            $("#toggleid").text("Show");
        } else {
            child.slideDown(function() {
                child.fadeTo(500, 1.0);                        
            });
            $("#toggleid").text("Hide");
        }
    });
});​

为了避免 chrome 中的伪影问题，您可能需要确保您的 css 将底部填充设置为 1px。不确定这是否总是必要的，或者只是在 jsFiddle 中：

body { 
    padding-bottom:1px;
}

另请参阅此小提琴 (http://jsfiddle.net/f3Lpv/2/)，了解淡入淡出的稍微不同的动画技术。

Answer 2

一种方法是：

$(function() {
    $("#toggleid").click(function(e) {
        var mh = $("#mother").height(),
            ch = $("#child").outerHeight();
        $("#mother").height(mh);
        if ($("#child").is(":visible")) {
            $("#child").fadeOut(500, function(e) {
                $("#mother").animate({ height: mh-ch });
                $("#toggleid").text("Show");
            });
        }
        else {
            $("#mother").animate({ height: mh+ch }, function(e) {
                $("#child").fadeIn(500);
                $("#toggleid").text("Hide");
            });
        };
    });
});

然而！如果你想让它更有活力，你可能会考虑更像：

$(function() {
    $(".toggleClass").live("click", function(e) {
        var $this = $(this),
            $mother = $this.parent(),
            $child = $this.siblings("div"), // maybe replace with Css Class ".child"
            mh = $mother.height(),
            ch = $child.outerHeight();
        $mother.height(mh);
        if ($child.is(":visible")) {
            $child.fadeOut(500, function(e) {
                $mother.animate({ height: mh-ch });
                $this.text("Show");
            });
        }
        else {
            $mother.animate({ height: mh+ch }, function(e) {
                $child.fadeIn(500);
                $this.text("Hide");
            });
        };
    });
});

Answer 3

Based on Steve Campbell's great answer, I updated the jsfiddle use jquery plugin instead.

usage: child.smoothFadeIn(); and child.smoothFadeOut();

(function ($) {
    $.fn.smoothFadeOut = function () {
        var selector = this;
        selector.slideDown(function () {
            selector.fadeTo(500, 1.0);
        });
    };

    $.fn.smoothFadeIn = function () {
        var selector = this;
        selector.fadeTo(500, 0.0, function () {
            selector.slideUp();
        });
    };
}(jQuery));

jsFiddle in action