Question

目前刚刚开始研究JQuery，我正在玩一些函数fadeIn（），fadeOut（），toggle（）。

我创建了一个包含多个图像的div，我创建了一个简单的图像fadeOut到新图像fadeIn，通过使用JQuery跟随Snooks教程。

我的问题是，在新图像淡入之前，我的第一张图像完全消失到白色屏幕，我想要实现的结果是第一张图像淡出，而第二张图像淡入，所以它看起来更平滑过渡。

我查看了JQuery文档，我认为我的问题的答案可能是设置Queue（false），但这似乎不起作用。

我创造了一个小提琴（减去图片）我已经习惯了，如果有人能帮助我，我会很感激。

HTML

<div class="fadein">
  <img width="800" height="420" src="images/wallpaper_2.jpg" />
  <img width="800" height="420" src="images/bognor2.jpg" />
</div>

jsfiddle

提前致谢，如有需要，请随时提出进一步的问题。

Answer 1

这是你的解决方案：

https://jsfiddle.net/23p4c8v0/2/

要实现这一目标，您需要定义此css：

.fadein img {
  position: absolute;
  top: 0;
  left: 0;
}

看到它正常工作：

＆＃13;

$('.fadein img:gt(0)').hide();
setInterval(function() {
  $('.fadein :first-child').fadeOut(1000).delay(7000)
    .next('img').fadeIn(1000)
    .end().appendTo('.fadein');
}, 7000);

＆＃13;

.fadein {
  width: 800px;
  height: 420px;
  overflow: hidden;
}
.fadein img {
  position: absolute;
  top: 0;
  left: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fadein">
  <img width="800" height="420" src="http://dummyimage.com/600x400/000/fff&text=Image+1" />
  <img width="800" height="420" src="http://dummyimage.com/600x400/dbdbdb/000cb3&text=Image+2" />
</div>

＆＃13;

JQuery fadeOut图像淡入新图像

1 个答案: