css/javascript 默认开始淡出，然后淡入答案

【问题标题】：css/javascript start faded out by default, then fade incss/javascript 默认开始淡出，然后淡入
【发布时间】：2017-09-12 13:44:16
【问题描述】：

我正在尝试制作一个按钮，该按钮会导致绿色检查图像淡入然后再次淡出。它主要工作，但是当页面加载时，如何使检查从淡出位置开始？

我试图将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' />

在调用之前，我可以在 css 中设置淡入/淡出使用的其他透明度属性吗？或者也许可以防止css中的不透明度覆盖fadeIn函数？

谢谢

【问题讨论】：

"当页面加载时，如何使检查从淡出位置开始？"你能解释得更好吗？
我的目标是让它不可见，然后当函数被调用时它会淡入可见，然后慢慢地又变得不可见。但我的问题是在调用淡入之前保持它不可见而不干扰它。显示：没有工作。

标签： javascript jquery opacity fadein fadeout

【解决方案1】：

我会在 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'/>

【讨论】：