Я пытаюсь зацикливать эту анимацию, но я не знаю, почему она не работает? У меня есть 4 divs с изображениями различий, и я хочу, чтобы это повторялось снова и снова.
$(document).ready(function () {
setInterval("comeon()", 2000);
});
function comeon() {
var current = $(".current");
var next = current.next();
if (next.length == 0) {
next = $(".current:first");
}
current.removeClass('current').addClass('previous');
next.css("opacity", "0.0").addClass("current").animate({
opacity: 1.0
}, 500, function () {
current.removeClass("previous");
comeon();
});
Что я сделал не так?
**UPDATE**
<div id="slider">
<div class="current" style="background-color:#F00;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#00F;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#0F0;position:absolute; width:400px; height:400px;"></div>
<div style="background-color:#FF3;position:absolute; width:400px; height:400px;"></div>
</div><!-- End slider-->
Пожалуйста, ознакомьтесь с http://jsfiddle.net/7kt9z/6/
next = $("cur:first");
Это попытка выбрать элемент типа <cur>
. К сожалению!
Вы хотите:
next = $(".current:first");
или
next = cur.first();
редактировать
Я, наконец, понимаю, что вам нужно:
next = current.siblings().first();
setInterval необходимо использовать определенным образом.
Вам нужно назначить setInterval переменной, и это назначение должно быть привязано к событию.
var setIt;
$(window).load(function() {
setIt = setInterval(comeOn, 1000);
});
Поскольку вы используете изображения, вы можете дождаться загрузки всех изображений, а затем запустить слайдер (который использует событие load
для назначения setInterval
переменной setIt
).
Кроме того, не завершайте свою функцию в qoutes в setInterval
. Вместо:
setInterval("comeOn()", 1000)
Сделай это:
setInterval(comeOn, 1000)
У меня есть рабочий пример здесь: http://codepen.io/anon/pen/rHzpL
setInterval
какой-либо переменной, он нигде не пытается его очистить?