How do I write this if condition with Jquery?

Question

Here is my function atm:

$(document).ready(function() {

$("#knd").click(function() {
    $("#wars").animate({
        opacity:'1'
    }); 


}); 

});

It works great but I want to add the option to remove the box with another click, figured I'd do it with an if statement but I'm not 100% on the syntax in Jquery. I want something along the lines of:

if(#wars is visible) {

$("#wars").animate({
         opacity:'0'
    });

How would I write the if statement for this?

SOLUTION:

$(document).ready(function() {

$("#knd").click(function() {
if($("#wars").css('opacity') === '0') {         
    $("#wars").animate({
    opacity:'1'
    }); //end of animate
}


else {
$("#wars").animate({
    opacity:'0'
});  //end of animate
}


}); //end of KND click function
}); //end of doc ready function

I had to change the visibility and set it to opacity instead, then it worked like a charm with the if statement.

score 5 · Answer 1 · answered May 08 '14 at 16:47

5

You can use .is() along with :visible selector:

if($('#knd').is(':visible')) {
    $("#wars").animate({
        opacity:'0'
    }); 
}

answered May 08 '14 at 16:47

Felix

37,892
8
43
55

this works but when it's visible it goes back to being invisible.. – Duplo W May 08 '14 at 16:58

mohamedrias · Accepted Answer · 2014-05-08T17:23:48.327

3

You can also check the following condition :

if($('#knd').css('visibility') === 'visible') {
    $("#wars").animate({
        opacity:'0'
    }); 
}

Suggested solution:

if($('#wars').css('opacity') === '0') {
    $("#wars").animate({
        opacity:'1'
    }); 
}

edited May 08 '14 at 17:23

answered May 08 '14 at 17:03

mohamedrias

18,326
2
38
47

score 1 · Answer 3 · answered May 08 '14 at 16:48

1

You can use .is(':visible') but you can use fadeToggle() or slideToggle().

*Toggle() function automatically does what you're intending to do, with effects.

answered May 08 '14 at 16:48

Amit Joki

58,320
7
77
95

toggle doesn't work at all for some reason.. – Duplo W May 08 '14 at 16:58
1

You've to use `$('#wars').fadeToggle();` – Amit Joki May 08 '14 at 16:59

How do I write this if condition with Jquery?

3 Answers3