Javascript 淡入淡出div
我试图让一个div有一个淡出然后淡入的效果,但淡出立即消失然后淡入完美工作。这就好像淡入效果会立即中断淡出 jsJavascript 淡入淡出div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图让一个div有一个淡出然后淡入的效果,但淡出立即消失然后淡入完美工作。这就好像淡入效果会立即中断淡出 js 将确保在淡入淡出完成后运行淡入淡出。您需要将第一个淡入淡出动画后应该发生的任何事情添加到回调函数中: $('#fillBg').stop(false,false).fadeTo(3000, 0, function() { $(this).hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0); });
将确保在淡入淡出完成后运行淡入淡出。您需要将第一个淡入淡出动画后应该发生的任何事情添加到回调函数中:
$('#fillBg').stop(false,false).fadeTo(3000, 0, function() {
$(this).hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
});
试一试
您可以像这样使用
fadeTo
方法的回调
//Cache the value, for performance
var divToHide = $('#fillBg');
divToHide.stop(false,false).fadeTo(3000, 0, function() {
divToHide.hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
});
或者使用fadeIn
和fadeOut
//Cache the value, for performance
var divToHide = $('#fillBg');
divToHide.fadeOut(3000, function() {
divToHide.hide().attr('src', bgImage).fadeIn(1500);
});
您的问题是第二个
。停止。调用stop将停止第二个fadeTo
动画
$('#fillBg').stop(true,false).fadeTo(3000, 0, backIn);
function backIn()
{
$("#fillBg").fadeTo(1500, 1.0);
}
请也发布一个JSFIDLE,这样我们就可以查看html以及代码是如何工作的检查您是否尝试在淡入效果的回调中使用淡入效果?我在发布这篇文章一分钟后就开始这样想了。谢谢你的回复。将标记为已回答。
//Cache the value, for performance
var divToHide = $('#fillBg');
divToHide.stop(false,false).fadeTo(3000, 0, function() {
divToHide.hide().attr('src', bgImage).stop(false,false).fadeTo(1500, 1.0);
});
//Cache the value, for performance
var divToHide = $('#fillBg');
divToHide.fadeOut(3000, function() {
divToHide.hide().attr('src', bgImage).fadeIn(1500);
});
$('#fillBg').stop(true,false).fadeTo(3000, 0, backIn);
function backIn()
{
$("#fillBg").fadeTo(1500, 1.0);
}