jquery - How to Fade Out an Element when Another Element Fade in

Question

Right now the code that I am using to try and get this to work does not seem to function correctly. h7 represents the element that is fading in while the class of back is the element that is going to fade out when h7 fades in. I hope to get this to work both ways

if ($("h7").css("display", "block")) {
    $(".back").hide("fast");
}           
else if ($("h7").css("display", "none")) {
    $(".back").show(500);
}

Answer 1

You are using css as setter which returns a jQuery object and an object is always true in JavaScript, you can use :visible selector and is method.

if ($("h7").is(":visible")) {
    $(".back").hide("fast");
}
else {
    $(".back").show(500);
}

Note that h7 is not valid element.