jquery 交叉淡入淡出两个图像

Question

我试图在两个图像上实现简单的交叉淡入淡出，但这看起来很跳跃并且不太赏心悦目。有什么办法可以确定淡出时间并使其更平滑吗？目前它只是结束而不淡出。

考虑:

<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

Answer 1

试试这个:http://jsfiddle.net/29Sad/2/

.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'); 
        }

基本上为图像添加了position:absolute。并对 js 进行一些更改。