jquery clears animation queue without any doubts

$(this).siblings().stop().fadeTo(200, 0.3);
jqueryAnimationThere is a queue that will generate animations for event Put it in a queue. When there is no time to execute these event queues, after the event ends, Continueexecution

Application scenario: In order to eliminate things like "mouseover / mouseout / mouseenter / mouseleave " The "flickering" problem caused by the animation queue accumulated by these events requires that in
certain circumstances, the previously accumulated animation queue be cleared first, and then the last animation action is executed.

This clear element The command of the accumulated animation queue is "stop()". It has two parameters:
Let's first look at w3school's explanation of stop(), which is the most authoritative:

jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。show, hide, toggle并不能算动画, 实质就是css的静态效果.

$(selector).stop(stopAll,goToEnd);
最重要的是, 要真正明白它的两个参数的含义:
[可选的 stopAll ]参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
[可选的 goToEnd ]参数规定是否立即完成当前动画。默认是 false。即就停在当前状态.

因此，本来, 默认地，stop() 只是去 清除在被选元素上指定的当前动画。

stop(isStopAll, isGoToEnd)
// 默认的参数是true, false
// stop(true, false) 清除所有的队列, 不要继续执行完当前未执行完的动画
// 清除动画队列: 不是恢复到动画执行之前的状态, 而是执行到哪里, 就停止在哪里. 
// 如果该动画设置了 **执行完毕后** 的回调函数，则不会执行该回调函数(因为动画并没有执行完毕)
// 如果使用stop()方法，则会立即停止当前正在运行的动画，

// 参数isGoToEnd:是否将当前动画效果执行到最后，意思就是, 停止当前动画的时候, 假设动画效果刚刚执行了一般，
// 这个时候想要的是 "动画执行之后的效果，那么这个参数就为true"。否则动画效果就会停在stop执行的时候

如果接下来还有动画等待执行，(这也是常常用到的情况, 要不然也不会去管stop()了)则 "以当前状态开始" 接下来的动画。

stop() No doubt : In actual development, the most commonly used method is stop(true, true). First, clear the current animation queue on object (the current animation must be cleared regardless of the parameters) and all subsequent animation queues, and Generally, the execution of the current animation should be completed (note that after this execution is completed, there is no intermediate execution process, but jump directly to the current animation if there is no clear, it should reach the final state). Then use the last animation action. It is rare to use the stop() method alone!

$('ol li').mouseover(function(){
    $(this).siblings().stop(true, true).fadeTo(300, 0.3);
});
$('ol li').mouseout(function(){
    $(this).siblings().stop(true, true).fadeTo(300, 1);
});

In many programming languages, here is js jquery php. Supports code writing alignment style:

• The purpose is to make the code look neat and elegant

• What is elegance? High-quality code is elegance. Writing code is as elegant as writing poetry. The writing style and arrangement of program code are similar to the code arrangement style of writing poetry. They are all long and short sentences, sometimes one word and one bracket {,} occupy one line. , Therefore, good and neat code looks like a poem, pleasing to the eye! It is much more elegant than ordinary eight-part essay.

• So, you must## when writing code #conscious Arrange and align your code. And js jquery php also supports this arrangement:

• In these languages, carriage return is equivalent to space and tab. You In order to align your code and make your code more neat and "elegant", you can use these three typeset symbols "arbitrarily". Of course, it will not have any impact on the execution of your code!

The above is the detailed content of jquery clears animation queue without any doubts. For more information, please follow other related articles on the PHP Chinese website!