У меня была фантастическая помощь Дэвида на этом посту. Как сбросить 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
Еще раз спасибо за вашу помощь, надеюсь, вы не возражаете против вопросов. обкрадывать
Вызов для .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);
функция.stop() здесь только для украшения, она ничего не меняет, поэтому, если ее можно легко разрезать.
в точку
в точку
в точку
(0)
в конце вызывает «одушевленную» функцию, поэтому она определяется и вызывается немедленно. Это только уменьшило одну строку кода. В противном случае он совпадает с вашим исходным кодом. Таким образом, функция «animate» первоначально вызывается сindex
установленным в0
. Цикл происходит из-за того, что «animate» вызывается снова в «завершенном» обратном вызове.