本文介绍了jquery交叉淡出两个图像的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在两个图像上实现简单的交叉淡入淡出,但这看起来很跳跃并且不太令人愉悦。有没有办法确定淡出时间并让它更顺畅?目前它只是结束而不会淡出。
I'm trying to achieve a simple cross-fade on two images, however this seems jumpy and not very pleasing to the eye. Is there any way to determine a fadeout time and make it smoother? Currently it just ends without fading out.
考虑:
<div class="fadein">
<img src="#" border="0" width="964" height="49" alt="" style="display:block;margin:auto;" id="level2Menu" />
<img src="#" border="0" width="964" height="49" alt="" style="display:block;margin:auto;" id="level2Menu" />
</div>
.fadein {
overflow:hidden;
height: 49px;
}
var $ = jQuery;
$(function () {
var fElement = $('.fadein');
if ( !console && !console.log ){
console = {};
console.log = function(){};
}
fElement.find('img:gt(0)').hide();
setInterval(function () {
if (!fElement.data('paused')) {
fElement.find(':first-child').stop(true,true).fadeOut(1000).next('img').fadeIn(1000).end(1000).appendTo('.fadein'); //.stop(true,true) fixes le tabbed/hidden animation queue
} else {
console.log('waiting...');
}
}, 5000);
});
TYIA
推荐答案
试试这个:
.fadein img{
position:absolute;
}
if (!fElement.data('paused')) {
fElement.find(':first-child').stop(true,true).fadeOut(1000);
fElement.find(':first-child').next('img').fadeIn(1000).end(1000).appendTo('.fadein');
}
基本上增加的位置:图像的绝对位置。并且在js中有一点变化。
Basically added position:absolute for images. And a bit of change in the js.
这篇关于jquery交叉淡出两个图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!