Я очень новичок в jQuery, JavaScript и т.д. Я работал над попыткой получить пару анимаций:
В настоящее время у меня есть частичная рабочая демонстрация, расположенная здесь: http://jsbin.com/uwonun/64/
Благодаря jwags работает 2-й.animate().
Я пытаюсь реализовать тот же эффект анимации, чтобы я мог заменить.slideDown().
Моя последняя попытка получить его работу можно найти здесь: http://jsbin.com/OYebomEB/1/
Имейте в виду, что, продолжая работать над этим, код изменится.
function anim_loop(index) {
$(elements[index]).css({top: 0, display: 'none'}).animate({top: -75},1000, function() {
var $self = $(this);
setTimeout(function() {
$self.animate({top: $(window).height() + 10}, 1000);
anim_loop((index + 1) % elements.length);
}, 3000);
});
}
Вы устанавливаете display:none
, но никогда не показываете его.
Используйте css('display','block')
в setTimeout()
перед animate()
:
setTimeout(function() {
$self.css('display','block').animate({top: $(window).height() + 10}, 1000);
anim_loop((index + 1) % elements.length);
}, 3000);
});
Вы можете сделать его плавным, установив opacity:0
при инициализации и opacity:1
во втором animate()
;)
Чтобы заставить первый цикл работать как другие, вы должны отображать свои элементы перед визуализацией на экране, установив display:block
before animate()
:
function anim_loop(index) {
$(elements[index]).css({top:-75, display: 'block'}).animate({top: '+0'},1000, function() {
var $self = $(this);
setTimeout(function() {
$self.animate({top: $(window).height() + 10}, 1000);
anim_loop((index + 1) % elements.length);
}, 3000);
});
}