javascript - 带有 css 值的 jQuery/javascript if 语句

Question

我对 if 语句有点陌生，我正在制作一个动画，其中:

如果<div id="headlights">在 css 中显示“无”(不断淡入和淡出)，我想要 <div id="speech-bubble-dark">淡入。

当 <div id="headlights">在 css 中显示“ block ”，我想要 <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');              
        });

    }
}

我已经对其进行了测试，并且淡入淡出不起作用，并且根据显示条件是“无”还是“ 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);              
      });
}