Jquery中的fadeIn和fadeOut效果答案

【问题标题】：fadeIn and faceOut effect in JqueryJquery中的fadeIn和fadeOut效果
【发布时间】：2012-06-20 05:50:01
【问题描述】：

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

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

【问题讨论】：

我将my answer 编辑为更简洁的方式

标签： jquery jquery-animate

【解决方案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);
    });
});

Live DEMO

【讨论】：

@VirendraRajput。我猜人们喜欢写... 6 行而不是 2 行。

【解决方案2】：

这是fiddle

还有代码

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

【讨论】：

【解决方案3】：

<script type="text/javascript">

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

</script>

【讨论】：