可见性if语句：如果css display不是none，则执行

Question

I have this Javascript function and it does not work. Got no errors from brackets. I am aware, that this also can be done with visibility, but in my case this seems better and I want to stay with it if that is possible.

I have three buttons and by hovering each, the matching div will fadeIn (.one, .two, .three). That code (not shown here) already works great.

Now I want to show .hello, when all three divs are faded in (aka display is not 'none' anymore like I wrote in the CSS file, because Javascript changed that by fading them in, right?).

CSS:

.hello {
    display: none; }

Javascript:

jQuery(function() {

    if (jQuery('.one').css('display') !== ('none') &&
        jQuery('.two').css('display') !== ('none') &&
        jQuery('.three').css('display') !== ('none')) {

            jQuery('.hello').fadeIn();
        }
});

Is something wrong with that?

Answer 1

I'm sure there is a better solution but it came to my mind at first. The function should be executed on change not once.

 //you did this part already. $("#1st").hover(function(){ $(".one").fadeIn(); }); $("#2nd").hover(function(){ $(".two").fadeIn(); }); $("#3rd").hover(function(){ $(".three").fadeIn(); }); //checks when hover $("#1st,#2nd,#3rd").hover(function(){ // same code if (jQuery('.one').css('display') !== ('none') && jQuery('.two').css('display') !== ('none') && jQuery('.three').css('display') !== ('none')) { jQuery('.hello').fadeIn(); } }) 

 .one,.two,.three,.hello{ display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="button" id="1st" value="1"> <input type="button" id="2nd" value="2"> <input type="button" id="3rd" value="3"> <br><br> <div class="one">1.content</div> <div class="two">2.content</div> <div class="three">3.content</div> <br><br> <div class="hello">Hello!</div>