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

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

Answer 2

试试这个

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

DEMO

Answer 3

以下是使用requestAnimationFrame的方法，该方法可提供最佳性能，并为不支持该浏览器的浏览器提供了填充功能：

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

jquery交叉淡出两个图像

3 个答案: