jQuery / javascript if-statement带有css值 [英] jQuery/javascript if-statement with css values

问题描述

如果< div id =头灯> 在css中显示none（其持续渐进和渐出），我想要< 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'）; 
}）; 
 
} 
} 
  

fades不起作用，并且取决于显示条件是none或block，它显示不同的div。

您建议我做什么？

解决方案

发布：

  function bubbleTest（）{
 if（$（＃headlights）。css ）==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年​​前）。

I'm slightly new to the if statements and I'm working on an animation where:

If <div id="headlights"> displays "none" in the css (which is constantly fading in and out), I want <div id="speech-bubble-dark"> to fade in.

And when the <div id="headlights"> displays "block" in the css, I want <div id="speech-bubble-sun"> to fade in.

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

    }
}

I've tested it and the fades do not work, and dependent on the display condition being "none" or "block" it displays a different div.

What would you suggest I do?

解决方案

The javascript originally posted:

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

surprisingly works as intended, here is proof: http://codepen.io/anon/pen/zoNevZ

The problem must have been how I was calling the function, which I did not provide at the time (5 years ago).

这篇关于jQuery / javascript if-statement带有css值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！