Попытка понять рутину JQuery

0

У меня была фантастическая помощь Дэвида на этом посту. Как сбросить css до повторения последовательности, но не было достаточно места в комментариях, чтобы задать все мои вопросы. Дэвид установил мое право JQuery, а также переписал большую часть его, потому что я направлялся в неправильном направлении. У меня теперь есть именно то, что я хочу. Текст появляется справа, скользит влево, приостанавливается и исчезает. Новая строка текста делает то же самое, и я могу иметь столько строк, сколько хочу.

Я хотел бы понять, что здесь происходит, я полный Noob с JQuery. Вот его работа - http://jsfiddle.net/Bf49z/13/ - Я перестроил строки, чтобы они имели больше смысла для меня. Вот вопросы, которые не вписываются в комментарии -

Трудно понять, почему анимация остановлена до ее начала.

$elements.eq(index).stop()   .animate({

Я предполагаю, что он останавливает анимацию во втором, третьем, четвертом и т.д. Повторах?

затем

.animate({"opacity": "1",  //Animate opacity to opaque
    "left": "6px"    //Animate left to 6px
    }, 1000,

Делает это видимым и перемещает его влево, принимая одну секунду?

я понимаю

$ (this).delay(3000).animate({//Подождите 3000ms

Затем следующая линия - способ угасания, изменяя непрозрачность в течение 1 секунды?

       .animate({   "opacity": "0"  //Animate opacity to transparent
    }, 1000, 

Затем следующие 2 строки сбросят css?

function(){ //After animation
        $(this).css("left", "400px"); //Reset left

Еще раз спасибо за вашу помощь, надеюсь, вы не возражаете против вопросов. обкрадывать

Теги:
textbox

2 ответа

0
Лучший ответ

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

Ответы на ваши другие вопросы "да", но .delay() применяется к очереди анимации, поэтому вам не нужно .delay() ее в "полную" функцию.

Поэтому вы можете сократить свой код до:

(function animate(index) {
    $elements.eq(index)
        .animate({ opacity: '1', left: '6px' }, 1000)
        .delay(3000)
        .animate({ opacity: '0' }, 1000, function() {
            $(this).css({ left: '400px' });
            animate((index + 1) % $elements.length);
        });
})(0);

jsfiddle

  • 0
    Большое спасибо John S, это намного компактнее. Глядя на скрипку, строки 3 и 11 являются петлей? Мне понадобится много времени, чтобы понять, как это сделать!
  • 0
    @Stingraynut - (0) в конце вызывает «одушевленную» функцию, поэтому она определяется и вызывается немедленно. Это только уменьшило одну строку кода. В противном случае он совпадает с вашим исходным кодом. Таким образом, функция «animate» первоначально вызывается с index установленным в 0 . Цикл происходит из-за того, что «animate» вызывается снова в «завершенном» обратном вызове.
0
  1. функция.stop() здесь только для украшения, она ничего не меняет, поэтому, если ее можно легко разрезать.

  2. в точку

  3. в точку

  4. в точку

Ещё вопросы

Сообщество Overcoder
Наверх
Меню