JQuery анимированный цикл

Question

У меня проблема с циклом анимации.Есть объект, который я хочу перемещать особым образом и делать это в цикле.Есть ли родные варианты сделать это?У меня есть это:

$(function () {
    function runIt() {
        $('#div').show("slow");
        $('#div').animate({"marginLeft":"300px"},8000);
        $('#div').animate({"marginLeft":"0px"},8000);
        $('#div').hide("slow", runIt);
    }
    runIt();
});

Но это выглядит не так красиво.

Answer 1

Это правильный способ поставить анимацию в очередь. Тем не менее, есть несколько вещей, которые можно сделать в вашем коде, чтобы сделать его немного более резким и красивым:

• Сохранение ссылки на выбранный элемент в локальной переменной для ускорения выполнения (меньше запросов в DOM)
• Очистите его, удалив ненужные кавычки для свойств объекта
• Размеры измеряются в пикселях по умолчанию, поэтому вместо них мы можем использовать чистые целые числа
• Именованную функцию можно заменить немедленно вызванной анонимной функцией, а затем использовать arguments.callee в качестве обратного вызова

Вот пример, демонстрирующий вышеуказанные изменения:

$(function () {
    var element = $("#div");
    (function(){
        element
            .show("slow")
            .animate({ marginLeft: 300 }, 1000)
            .animate({ marginLeft: 0 },   1000)
            .hide("slow", arguments.callee);
    }());
});

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

Подробнее о немедленно вызванной функции выражения можно прочитать в Блог Бена "Ковбой" Алмана .

Answer 2

Вот как бы я это сделал. Единственное предложение, которое я хотел бы сделать, это использовать цепочку для лучшего кода, поэтому объект jquery создается не каждый раз.

$(function () {
   function runIt() {
      $('#div').show("slow")
               .animate({"marginLeft":"300px"},8000)
               .animate({"marginLeft":"0px"},8000)
               .hide("slow", runIt);
   }

   runIt();
});