jQuery淡出在麻烦(工作在第二个旋转，但不是第一个)

Question

好的，我主要处理内容和一些前端设计，但我试图把一个漂亮的图像滑块iFrame到我们的网站。我能够使用jQuery构建它，但我有一个小问题。它应该有一个渐入和渐出，但在第一次旋转时，它只使用渐出。下一个旋转，它工作完美。

下面是我使用的代码

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
  slideShow();
});
function slideShow() {
  var showing = $('#ContentContain2 .isshowing');
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');
  showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing');
  setTimeout(slideShow, 5000);
}
</script>

这是一个链接到它的托管，所以你可以看到问题。

http://ksee.bimedia.net/sites/community/index.html

Answer 1

试着先把它们都隐藏起来(然后再淡入)。我认为这就是罪魁祸首，这就解释了为什么它们在第一个周期消失后(而不是之前)又消失了。你不能从完全不透明度中"淡入"。

$(document).ready(function(){
  $("#ContentContain2").children("img").not(".isshowing").hide(); // hide em
  slideShow();
});
function slideShow() {
  var showing = $('#ContentContain2 .isshowing');
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');
  showing.fadeOut(800, function() { next.fadeIn(1600).addClass('isshowing'); }).removeClass('isshowing');
  setTimeout(slideShow, 5000);
}

Answer 2

我会在css文件中添加以下内容(或者只对单个元素应用样式):

#ContentContain2 img
{
display: none;
}
#ContentContain2 img.isshowing
{
display: inline;
}

这将有效地完成Set Sail对代码的建议:它将隐藏元素，直到fadeIn被调用。

另外，您是否意识到img2是实际显示的第一个内容?如果你想让img1先显示，我将把isshowing类移到img4，这样脚本就会淡入img1。

编辑:下面是一个JSFiddle来演示:http://jsfiddle.net/Efbt3/