Задержка Jquery не работает

Question

Привет, ребята. Я пытаюсь сделать простую анимацию с некоторыми задержками, но она не работает, пожалуйста, помогите мне.вот код

$(document).ready(function() {
    $('.detailsholder').hide()
    $(".detailsholder").animate({"top": '-520px'},1)
    $('.detailsholder').hide()
    $('.detailsholder').fadeIn(500)
    $('.detailsholder').delay(5000).animate({'top': "-260px",'easing': "easeInElastic"}, 400).delay(5000).('.detailsholder').animate({'top': "0px",'easing': "easeInElastic"},400);
});

Answer 1

Здесь решение для вас;

$('.detailsholder')
    .hide()
    .css('top', '200px')
    .fadeIn(500)
    .delay(2000)
    .animate({'top': "100px", 'easing': "easeInElastic"}, 400)
    .delay(2000)
    .animate({'top': "0px", 'easing': "easeInElastic"}, 400);

Вы можете рассмотреть возможность использования идентификатора, а не класса, поскольку ваша анимация кажется совершенно уникальной.

Наслаждайтесь! :)

Answer 2

Вы также можете ставить в очередь события, поскольку задержка применяется только к очереди анимации.

Я создал эту скрипку: http://jsfiddle.net/scaillerie/Veg59/1/.

Вы также можете посмотреть на этодругой пост: Как отложить анимацию jquery? .

Answer 3

Я предполагаю, что вы хотите, чтобы каждый delay() происходил после завершения анимации, и в этом случае вы должны поместить его в обратный вызов. В существующем состоянии задержка будет запущена во время анимации.

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

Answer 4

Что-то не так в строке 6 вашего кода (здесь я разбил эту строку на несколько для лучшего чтения:

$('.detailsholder')
.delay(5000)
.animate({'top': "-260px",'easing': "easeInElastic"}, 400)
.delay(5000)
.('.detailsholder') // The method is missing here!
.animate({'top': "0px",'easing': "easeInElastic"},400);

Примечание: Вы также должны связать свой код jQuery и ставить точку с запятой после каждой команды.

Answer 5

$(function(){
    $('.detailsholder').hide().animate({"top": '-520px'},1).fadeIn(500).delay(5000).animate({'top': "-260px",'easing': "easeInElastic"},400).delay(5000).animate({'top': "0px",'easing': "easeInElastic"},400);
});