JQuery: постепенное увеличение и уменьшение деления

Question

У меня есть div в верхней части страницы, который я хотел бы постепенно увеличивать и уменьшать в 3 раза.Я уже нашел вопрос / ответ, который показывает, как затухать с помощью бесконечного цикла, помещая эффекты затухания в функцию, которая вызывает себя, но мне было интересно, как лучше указать конечное число циклов затухания.Пока что это то, что у меня есть (украдено из другого поста StackOverflow):

function fade() {
    $("#notification").animate({opacity: 1.0}, {duration: 500})
        .animate({opacity: 0}, {duration: 500})
        .animate({opacity: 0}, {duration: 500})
        .animate({opacity: 1.0}, {duration: 500, complete: fade})
}

Заранее извиняюсь за то, что я такой js noob.

Answer 1

Если вы используете последнюю версию jQuery (1.4 на момент написания этой статьи), вы можете указать такой короткий цикл с помощью прямых вызовов функций:

$("#notification").fadeIn(500).fadeOut(500).delay(500)
    .fadeIn(500).fadeOut(500).delay(500)
    .fadeIn(500).fadeOut(500);

delay было введено в jQuery 1.4.

Если повторение вас беспокоит, вы можете сделать его плагином:

$.fn.pulsate = function( number, time){
    for(var i = 0; i < number; i++){
        this.fadeIn(time).fadeOut(time);
        if(i != number - 1) this.delay(time);
    }
    return this;
}

Затем его можно использовать так:

$("#notification").pulsate( 3, 500 );

Answer 2

Я думаю, что было бы лучше использовать его в обратном вызове.Создать рекурсивную функцию с пределом замирания.

animation(max, total) {
    if (total < max) $(...).animate(..., animation(max, total + 1));
}