Jquery Fadein Fadeout слайд-шоу не работает должным образом

Question

У меня возникли проблемы с показом слайдов в jquery @ http://www.willruppelglass.com/ (внизу)

Как вы можете видеть, изображения исчезают и исчезают, и это работает правильно, и изображения поступают с сервера, и я установил высоту 200 для каждого изображения. У меня проблема в том, что после исчезновения изображения все еще отображаются, и я могу их видеть. То, что я пытаюсь сделать, это когда изображение исчезает, не отображать его, но когда оно исчезает, отображать его. Возможно ли это?

function slideSwitch() {
var $active = $('#slideshow IMG.active');

if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow IMG:first');


$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 6500 );   
});

#slideshow {
    position:relative;
    height:200px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

<div id="slideshow">

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />

<img src="upload/<?php echo $array['image2'] ?>" height="200" />

<img src="upload/<?php echo $array['image3'] ?>" height="200" />

</div>

Любая помощь будет оценена.

Answer 1

Вы должны добавить анимационный код для затухания активного изображения, чтобы переход был более плавным.Если вы запустите все анимации одновременно, вам придется настроить время, чтобы все было гладко;Я не уверен, почему это так, но именно поэтому я изменил продолжительность до 2000 миллисекунд.

Я протестировал приведенный ниже код, и похоже, что он работает плавно, как это.Однако я хочу посоветовать вам рефакторинг вашего кода, чтобы у вас осталась только 1 анимационная функция.Вы также должны изменить размер изображений, которые вы используете для слайд-шоу (5 мегабайт для изображения - СЕРЬЕЗНОЕ излишество).

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
        $active.removeClass('active last-active');
    });

    $active.animate({opacity: 0}, 2000);
}

Если вы действительно хотите скрыть изображение только после завершения анимации шоу, вы можете использоватьприведенный ниже код, но на самом деле это выглядит не очень гладко, конечно, по вашему выбору.

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    // use this to pull the images in the order they appear in the markup
    var $next =  $active.next().length ? $active.next(): $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
        $active.removeClass('active last-active');
        $active.css({opacity: 0.0});
    });
}

Answer 2

Helmus прав, ваши изображения слишком велики - когда кто-то впервые заходит на сайт, он исчезает через 2 или несколько раз, прежде чем изображение будет загружено. Для изображений такого размера 30 КБ - это большое, не говоря уже о 5 мегабайтах. Возможно, вы также захотите предварительно загрузить изображения - это довольно просто в использовании - https://github.com/desandro/imagesloaded.

Не уверен, как вы хотите, чтобы они были выровнены, но вы также можете использовать jquery, если css не может это сделать.

Answer 3

Есть ли причина, по которой вы используете .animate (), а не встроенные функции jQuery .fadeOut () и .fadeIn ()?

Answer 4

Тогда не применяйте fadeOut к изображению, которое необходимо удалить из вида, просто hide() it.