css / javascript默认情况下淡出,然后淡入

时间:2017-04-16 22:56:47

标签: javascript jquery opacity fadein fadeout

我试图制作一个按钮,使绿色检查图像淡入,然后再次淡出。它主要起作用,但是当页面加载时,如何在淡出位置开始检查?

我试图将opacity: 0;放在其css中,假设fadeIn函数改变了不透明度,但它根本没有显示出来。



function green_check(check) { //fade in half a sec, hold 2 sec, fade out in 3 sec
  $(check).fadeIn(500, function() {
    $(this).delay(2000).fadeOut(3000);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="green_check(getElementById('check'));">Show Check</button>

<img class='five_sec_check' width="50" height="50" id="check" src='http://cliparts.co/cliparts/qcB/Bex/qcBBexbc5.png' />
&#13;
&#13;
&#13;

还有一些其他透明属性,fadeIn / fadeOut使用我可以在css中设置之前调用吗?或者可能阻止css中的不透明度覆盖fadeIn函数?

由于

1 个答案:

答案 0 :(得分:3)

我在css中使用display:none来隐藏页面加载:

#check {
  display:none;
}

function green_check(check){ //fade in half a sec, hold 2 sec, fade out in 3 sec
    $(check).fadeIn(500, function () {
        $(this).delay(2000).fadeOut(3000);
    });
}
#check {
  display:none;
  width:16px;
  height:16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="green_check(getElementById('check'));">Show Check</button>

<img class='five_sec_check' id="check" src='http://neil.computer/s/check.png'/>