Question

我有一个淡入淡出的脚本，但图像并没有很好地消失。首先，第一张图像淡出而下一张图像淡入。在褪色之间你什么也看不见。我希望图像同时淡出和淡入。

有人知道如何解决这个问题吗？我想我必须编辑下面的几行。

for (var i = 0; i < slider.num; i++) {
   if(i == slider.cur || i == pos) continue;
   jQuery('#' + d[i].id).hide();
}

if(slider.cur != -1){
   jQuery('#' + d[slider.cur].id).stop(false,true);
   jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed ,function(){
      jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
   });
}
else
{
   jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
}

Answer 1

如果它们应该同时淡出，它们应该与CSS放在同一个地方，以便它们显示在同一位置：

div img {
    position: absolute; /* absolute positioning in the div */
    left: 0; /* position the images at the top left hand corner of the div */
    top: 0;
}

div {
    position: relative; /* relative positioning of the div itself */
}

然后，您可以使用成功回调通过 not 同时为两个图像设置动画。回调仅在动画完成时运行。

var imgs = $("div img"); // images

imgs.slice(1).hide(); // hide all except first
$("div").show(); // show the div (hide it initially because the images
                 // are loading which causes some flicker)

function fade(i) {
    imgs.eq(i).fadeOut(1000);    // fade out this one
    imgs.eq(i + 1).fadeIn(1000); // fade in next one immediately
}

var i = 0;
setInterval(function() {
    fade(i); // fade to the next image every 2 seconds
    i++;
}, 2000);

http://jsfiddle.net/KXkHs/

Answer 2

如果你想让fadeIn和fadeOut同时发生，你需要从成功回调中取出FadeIn并将其与fadOut函数并行：

  if(slider.cur != -1){
    jQuery('#' + d[slider.cur].id).stop(false,true);
    jQuery('#' + d[slider.cur].id).fadeOut(slider.fade_speed);
    jQuery('#' + d[pos].id).fadeIn(slider.fade_speed);
  }

FadeIn和FadeOut图像的问题

2 个答案: