jquery交叉淡出两个图像 [英] jquery cross fade two images

问题描述

我正在尝试在两个图像上实现简单的交叉淡入淡出，但这看起来很跳跃并且不太令人愉悦。有没有办法确定淡出时间并让它更顺畅？目前它只是结束而不会淡出。

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

推荐答案

试试这个： 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'); 
        }

基本上增加的位置：图像的绝对位置。并且在js中有一点变化。

Basically added position:absolute for images. And a bit of change in the js.

这篇关于jquery交叉淡出两个图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！