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