jquery交叉淡出两个图像

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

考虑：

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

基本上增加了位置：绝对是图像。 并且js有点变化。

Answer 2

试试这个

 fElement.find(':first-child').appendTo('.fadein').fadeOut(1000, function () { $(this).next('img').fadeIn(1000) }); 

DEMO

Answer 3

以下是使用requestAnimationFrame的方法，该方法将提供最佳性能，并包含不支持它的浏览器的polyfill：

 window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var start = null; var fadeFlag = true; var imgs = document.querySelectorAll('img'); var speed = 2000; var delay = 5000; function step(timestamp) { var progress; var fadingIn, fadingOut; fadingIn = fadeFlag ? imgs[0] : imgs[1]; fadingOut = fadeFlag ? imgs[1] : imgs[0]; if (start === null) start = timestamp; progress = timestamp - start; if (progress > speed) { if(progress > delay){ start = null; fadeFlag = !fadeFlag; } else{ fadingIn.style.opacity = progress/speed; fadingOut.style.opacity = progress == 0 ? 1 : 1 - progress/speed; } } else{ fadingIn.style.opacity = progress/speed; fadingOut.style.opacity = progress == 0 ? 1 : 1 - progress/speed; } requestAnimationFrame(step); } requestAnimationFrame(step); 

http://jsfiddle.net/29Sad/9/

参考： http ： //www.paulirish.com/2011/requestanimationframe-for-smart-animating/ https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame