jQuery Fade in trouble (работает во второй ротации, но не в первый раз)

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

Это будет эффективно делать то, что отплыли предложил сделать с кодом: это 'Скрыть элементы до тех пор, пока не вызывается fadeIn.

Кроме того, вы знаете, что img2 - это первое, что отображается на самом деле? Если вы хотите, чтобы img1 отображался первым, я бы переместил ваш класс isshowing в img4, чтобы сценарий затухал img1 для начала.

редактировать: Вот такой JSFiddle, чтобы продемонстрировать: http://jsfiddle.net/Efbt3/