0

div の子をフェードアウトさせてから、div 自体の高さをアニメーション化しようとしていますが、jsFiddle で試しましたが、うまくいかず、奇妙な線が表示されます... 誰か助けてくれますか?

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

4

3 に答える 3

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/) も参照してください。

于 2012-08-06T20:09:57.870 に答える
0

1つの方法は次のとおりです。

$(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");
            });
        };
    });
});
于 2012-08-06T19:56:17.993 に答える
0

Steve Campbell の素晴らしい回答に基づいて、代わりに jsfiddle use 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 の動作

于 2014-09-24T20:17:14.987 に答える