jquery - Jquery中的fadeIn和faceOut效果

Question

我需要在以下脚本中添加淡入淡出功能。我需要css element获得样式display: nonefadeOut 和css element获得样式display: blockfadeIn 的那个。我该怎么做？

$(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();
    });
});​