试图了解一个JQuery例程 [英] Trying to understand a JQuery routine

问题描述

David在这篇文章中得到了大卫的极大帮助如何重置CSS在重复序列之前，但是评论中没有足够的空间来问我所有的问题. David设置了正确的JQuery并重写了其中的大部分内容，因为我朝错误的方向前进 我现在所拥有的正是我想要的，文本显示在右侧，滑到左侧，暂停并消失.一行新的文本可以做同样的事情，我可以根据需要设置任意多行.

I had fantastic help from David on this post How to reset css before repeating sequence but there wasn't enough room in comments to ask all my questions. David set my JQuery right and also rewrote most of it because I was heading in the wrong direction What I have now is exactly what I want, Text appears on the right, slides over to the left, pauses and fades. A new line of text does the same thing and I can have as many lines as I want.

我想了解这里发生的事情，我是使用JQuery的完整Noob. 这是工作的jsfiddle- http://jsfiddle.net/Bf49z/13/-我重新排列了线条，使它们对我来说更有意义. 这是评论中不适合的问题-

I would like to understand what is happening here, I'm a complete Noob with JQuery. Here is a jsfiddle of it working - http://jsfiddle.net/Bf49z/13/ - I have rearranged the lines so they make more sense to me. Here are the questions that wouldn't fit in the comments -

很难理解的是为什么动画在开始之前就被停止了.

What is hard to understand is why the animation is stopped, before it’s started.

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

我认为它会在第二，第三，第四等重复处停止动画?

I assume it stops the animation at the second, third, fourth etc repeats?

然后

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

使其可见并向左移动一秒钟?

Makes it visible and moves it to the left, taking one second?

我了解

$(this).delay(3000).animate({//等待3000ms

$(this).delay(3000) .animate({ //Wait 3000ms

那么下一行是否可以通过在1秒钟内更改不透明度来淡化?

Then is this next line a way of fading by changing opacity over 1 second?

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

然后接下来的2行会重置CSS吗?

Then the next 2 lines reset the css?

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

再次感谢您的帮助，希望您不要介意这些问题. 罗布

Thanks again for your help, hope you don’t mind the questions. Rob

推荐答案

对.stop()的调用将停止该元素正在进行的任何动画.但是，既然不应该有任何内容，那么在您的情况下就没有必要了.当鼠标事件触发动画时，通常使用它.在这种情况下，您可能需要先停止正在进行的动画，然后再开始制作新的动画.

The call to .stop() will stop any animation that is in-progress for the element. But since there shouldn't be any, it is unnecessary in your case. It is often used when animations are triggered by mouse events. In such a case, you may need to stop an animation that is in-progress before starting a new one.

对其他问题的回答都是是"，但是.delay()适用于动画队列，因此您不必将其置于完成"功能中.

The answers to your other questions are all "yes", but .delay() applies to the animation queue, so you do not have to put it in the "complete" function.

因此，您可以将代码缩短为:

Therefore you could shorten your code to:

(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

这篇关于试图了解一个JQuery例程的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！