JQuery / Javascript if-оператор со значениями CSS

Question

Я немного новичок в операторах if и работаю над анимацией, где:

Если <div id="headlights"> не отображает "none" в css (которое постоянно исчезает и исчезает), яхочу, чтобы <div id="speech-bubble-dark"> постепенно исчезал.

И когда <div id="headlights"> отображает "блок" в css, я хочу, чтобы <div id="speech-bubble-sun"> исчезал.

function bubbleTest(){
if($("#headlights").css("display") == "none" ) {
    $("#speech-bubble").fadeOut('600');
    $("#speech-bubble-sun").fadeOut('600', function(){
        $("#speech-bubble-dark").fadeIn('600');
    });

}   else{
        $("#speech-bubble").fadeOut('600');
        $("#speech-bubble-dark").fadeOut('600', function(){
            $("#speech-bubble-sun").fadeIn('600');              
        });

    }
}

Я тестировалон и фейдеры не работают, и в зависимости от состояния отображения «none» или «block» он отображает другой div.

Что бы вы посоветовали мне сделать?

Answer 1

Я думаю, что вы ищете это. Попробуй

function bubbleTest(){
   if(!$("#headlights").is(":visible")){//This will check for headlights is visible or not
      $("#speech-bubble").fadeOut(600);
      $("#speech-bubble-sun").fadeOut(600, function(){
        $("#speech-bubble-dark").fadeIn(600);
      });
   }
   else{
      $("#speech-bubble").fadeOut(600);
      $("#speech-bubble-dark").fadeOut(600, function(){
        $("#speech-bubble-sun").fadeIn(600);              
      });
}

Answer 2

Первоначально опубликованный javascript:

function bubbleTest(){
if($("#headlights").css("display") == "none" ) {
    $("#speech-bubble").fadeOut('600');
    $("#speech-bubble-sun").fadeOut('600', function(){
        $("#speech-bubble-dark").fadeIn('600');
    });

}   else{
        $("#speech-bubble").fadeOut('600');
        $("#speech-bubble-dark").fadeOut('600', function(){
            $("#speech-bubble-sun").fadeIn('600');              
        });

    }
}
bubbleTest();

на удивление работает как задумано, вот доказательство: http://codepen.io/anon/pen/zoNevZ

Проблема, должно быть, заключалась в том, как я вызывал функцию, что я и сделалне предоставить в то время (5 лет назад).

Answer 3

Попробуйте заменить это:

$("#headlights").css("display") == "none"

на это:

if (!$("#headlights").is(':visible'))

:visible - это "селектор" jQuery (если у вас нет документации,Информативны).Вы можете использовать метод is(), чтобы проверять, является ли видимый селектор истинным.Аналогично, вы можете делать такие вещи для элементов формы:

if ($('#optInCheckbox').is(':checked'))