jquery - JqueryのfadeInおよびfaceOut効果

Question

次のスクリプトでフェード機能を追加する必要があります。css elementスタイルfadeOutを取得するものとスタイルfadeInを取得するdisplay: noneものが必要です。どうすればいいですか？css elementdisplay: block

$(document).ready(function() {
    $("#contacts").toggle(function() {
        $("#phone_2").css("display", "block");
        $("#phone_1").css("display", "none");
    }, function() {
        $("#phone_1").css("display", "block");
        $("#phone_2").css("display", "none");
    });
});​

Answer 1

$(document).ready(function() {
    $("#contacts").toggle(function() {
        $("#phone_2").fadeIn();
        $("#phone_1").fadeOut();
    }, function() {
        $("#phone_1").fadeIn();
        $("#phone_2").fadeOut();
    });
});​

ちなみに、あなたはそれをもっと簡単に行うことができます：

$(document).ready(function() {
    $("#contacts").click(function() {
        $("#phone_2, #phone_1").toggle(400);
    });
});​

ライブデモ

Answer 2

<script type="text/javascript">

$(document).ready(function() {
    $("#contacts").toggle(function() {
        $("#phone_2").fadeIn();
        $("#phone_1").fadeOut();
    }, function() {
        $("#phone_1").fadeIn();
        $("#phone_2").fadeOut();
    });
});​

</script>

Answer 3

これがフィドルです

そしてコード

$(document).ready(function() {
    $("#contacts").toggle(function() {
        $("#phone_2").fadeIn();
        $("#phone_1").fadeOut();
    }, function() {
        $("#phone_1").fadeIn();
        $("#phone_2").fadeOut();
    });
});​