CODEWITHSUNDEEP
jquery
piersrueb
piersrueb

Reputation: 13

Jquery fade out a div?

I am using the following code to show and hide two div positioned absolutely on top of each other. When one is opened the other closes.

function ShowHide(){
$("#info").animate({"height": "toggle"}, { duration: 300 });
$("#credits:visible").animate({"height": "toggle"}, { duration: 300 });
}
function ShowHide2(){
$("#credits").animate({"height": "toggle"}, { duration: 300 });
$("#info:visible").animate({"height": "toggle"}, { duration: 300 });
}

I want to fade the div's in rather than animate them, i substituted .animate with .fadeIn which worked fine but i cannot get the div to then fade out when the link in clicked again. I tried the .fadeOut method with no luck. Thanks.

Upvotes: 1

Views: 331

Answers (1)

Frédéric Hamidi
Frédéric Hamidi

Reputation: 263157

You can use fadeToggle():

function ShowHide() {
    $("#info, #credits:visible").fadeToggle(300);
}

function ShowHide2() {
    $("#credits, #info:visible").fadeToggle(300);
}

EDIT: As @FishBasketGordo correctly points out, if your elements are set up properly (one visible, the other hidden initially), then you only need one call (and one function):

$("#credits, #info").fadeToggle(300);

Upvotes: 2

Related Questions