我必须在回调中淡入隐藏图像。
<img src="images/bottle.png" id="bootle" >
这张图片的 css(in head)
#bootle {
visibility: hidden;
}
现在,在一个动画函数中,我试图在动画完成后淡出这个瓶子。我就是这样做的
function () {
$('#bootle').css({
visibility: 'visible'
}).fadeIn(5000);
} //its callback
但是这个第一次显示它没有淡入淡出效果,如果我首先尝试使用淡入淡出效果不佳,我该怎么办?
最佳答案
设置visibility: visible
,隐藏元素(例如,display: none
,这是jQuery的hide
方法所做的),然后淡入
:
$('#bootle').css("visibility", "visible").hide().fadeIn(5000);
实例:
$("input[type=button]").on("click", function() {
$('#bootle').css("visibility", "visible").hide().fadeIn(1000);
});
#bootle {
visibility: hidden;
}
<div>
<img src="/image/6Molf.png?s=32&g=1" id="bootle">
</div>
<input type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
或者您可以将 hide
组合到 css
调用中:
$('#bootle').css({
visibility: "visible",
display: "none"
}).fadeIn(5000);
实例:
$("input[type=button]").on("click", function() {
$('#bootle').css({
visibility: "visible",
display: "none"
}).fadeIn(1000);
});
#bootle {
visibility: hidden;
}
<div>
<img src="/image/6Molf.png?s=32&g=1" id="bootle">
</div>
<input type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
同样的结果。
或者正如 Tushar 在评论中建议的那样,如果您不需要用完布局空间(这是 visbility: hidden
所做的),您可以只使用 display: none
首先在 CSS 中;那么你根本不需要 css
或 hide
调用:
#bootle { display: none }
$('#bootle').fadeIn(5000);
实例:
$("input[type=button]").on("click", function() {
$('#bootle').fadeIn(1000);
});
#bootle {
display: none
}
<div>
<img src="/image/6Molf.png?s=32&g=1" id="bootle">
</div>
<input type="button" value="Click Me">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
注意按钮是如何移动的,因为它位于图像下方,display: none
将图像完全从布局中取出,而 visibility: hidden
为其保留空间.
关于javascript - 查询 : fadeIn hidden element in callback,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32931911/