Question

I need to add fade function in the following script. I need that the css element which gets style display: none fadeOut and the css element which gets style display: block fadeIn. How shall I do that?

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

By the way, you can do that a lot simpler with:

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

Live DEMO