Question

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

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/），了解fadein上略有不同的动画技巧。

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

基于Steve Campbell's great answer，我更新了jsfiddle使用jquery插件。

用法：child.smoothFadeIn();和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

fadeOut然后孩子动画div的高度

3 个答案: