CSS/JavaScript默认开始淡出,然后淡入 [英] css/javascript start faded out by default, then fade in
问题描述
我正在尝试创建一个按钮,该按钮会使绿色的选中图像淡入,然后再次淡出.多数情况下都可以,但是如何在页面加载时使支票从淡出的位置开始呢?
I'm trying to make a button that causes a green check image to fade in then fade out again. It mostly works, but how do I make the check start out in the faded out position when the page loads?
我尝试将 opacity:0;
放入其CSS中,假定fadeIn函数会更改不透明度,但此后它根本不会显示.
I tried to put opacity: 0;
in its css, assuming that the fadeIn function changes the opacity, but then it doesn't show up at all.
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' />
是否有其他我可以在调用前在CSS中设置的fadeIn/fadeOut使用的透明度属性?还是可以防止css中的不透明性覆盖fadeIn函数?
Is there some other transparency property that fadeIn/fadeOut uses that I can set in the css before those are called? Or maybe prevent the opacity in the css from overriding the fadeIn function?
谢谢
推荐答案
我将在CSS中使用display:none来隐藏页面加载:
I'd use display:none in css to hide on page load:
#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'/>
这篇关于CSS/JavaScript默认开始淡出,然后淡入的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!