Question

我需要在以下脚本中添加淡入淡出功能。我需要获得样式css element fadeOut的display: none和获得样式css element fadeIn的display: 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);
    });
});

Live DEMO

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

这是fiddle

代码

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

Jquery中的fadeIn和fadeOut效果

3 个答案: