jQuery цикл анимации с изображениями

Question

Я хочу создать очень простое слайд-шоу с использованием непрозрачной анимации. Я не могу использовать функции fadeIn или fadeOut, потому что отображение настроек: ни один из них не разбивает мой макет.

У меня эти 4 фиксированных изображения, и я хочу сделать это, чтобы анимировать непрозрачность до 0, а затем изменить img src, а затем обновить непрозрачность до 1.

Любые идеи? Как я могу сделать это навсегда?

Спасибо.

Answer 1

Попробуйте разместить img элементы внутри контейнера родительского элемента; с использованием .fadeTo(), который не корректирует display свойство css, наконец, элемент индекса в контейнере родительского элемента; когда анимация завершена, отрегулируйте opacity от img до 1; позвоните .prependTo(), чтобы переместить img для первого указателя в контейнере родительского элемента; повторяйте бесконечно.

(function fx() { 
 
    return $("div img").eq(-1).delay(1500).fadeTo(3000, 0, function() { 
 
    $(this).css("opacity", "1").prependTo($(this).parent()) 
 
    }).promise().then(fx); 
 
}).call($("div img"));

div { 
 
    position: relative; 
 
    height: 400px; 
 
    width: 400px; 
 
    margin: 0 auto; 
 
} 
 
div img { 
 
    position: fixed; 
 
    left: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
</script> 
 
<div> 
 
    <img src="http://lorempixel.com/400/400/cats" /> 
 
    <img src="http://lorempixel.com/400/400/technics" /> 
 
    <img src="http://lorempixel.com/400/400/nature" /> 
 
    <img src="http://lorempixel.com/400/400/animals" /> 
 
</div>

Answer 2

Вы можете использовать метод jQuerys animate. Сначала вы используете его на изображении, которое хотите погасить, и установите непрозрачность на 0 и после изменения источника изображения вы должны использовать его для изменения непрозрачности до 1.

Для бесконечного цикла: вы можете вызвать функцию каждый X ms с setInterval. Итак, вы должны поместить весь свой код, который изменяет изображение внутри функции (назовем это changeImage), а затем используйте setInterval. Вы можете запустить его с setInterval(changeImage, 3000), и изображение будет меняться каждые 3 секунды, например.