的jQuery/JavaScript的if語句與CSS值

Question

我稍微新的if語句和我工作的一個動畫，其中：

如果<div id="headlights">顯示「無」在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

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 2

嘗試更換這樣的：這個

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

：

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

:visible是一個jQuery 「選擇」（閱讀他們的文檔，如果你還沒有，他們是非常翔實） 。您可以使用is()方法來執行諸如檢查可見選擇器是否爲真的事情。同樣，你可以做這樣的表單元素：

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

Answer 3

我認爲你正在尋找這個。試試吧

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);    
     }); 
}