A couple of days ago, I saw a friend of the Oak Cottage published the "JQuery implementation of the picture carousel effect", more interesting, found that he is using Fadein and fadeout to achieve the fade in the image of the rotation. At that time worried about his example if a number of consecutive clicks, the resulting animation will not have a delay. But I clicked a few consecutive, did not see the obvious delay, did not think more.
As we all know, the animation effects of jquery come into the queue by default. If: Click, produce animation for 3 seconds. And then I quickly connected 3 times. Then wait 9 seconds for all animations to end. Animate is a custom animation that makes it easy to set whether an animation enters a queue. But using Fadein and fadeout is a hassle.
See the icon of some flash website, the mouse put up the icon on the slowly changed, and will slowly change back, is very beautiful. I'm going to do it with jquery and see if I can make a similar effect. Because oneself practicing, just pull two picture:
Copy Code code as follows:
So the first one will cover the second picture, so I just fade in and out of the first picture will be able to achieve special effects. So the use of Hover,fadein and fadeout, simple to achieve
Copy Code code as follows:
$ (document). Ready (function () {
$ ("div"). Hover (
Function () {$ ("#1"). fadeout (1000);},
Function () {$ (' #1 '). FadeIn (1000);}
);
});
But this problem comes out if I move the mouse over and over in the picture constantly and quickly. Then the animation has entered the queue, then the animation will always be moving, it is not good-looking.
So I intend to use: dequeue (), definition: Removes a queued function from the front of the queue and executes it.
I think if you keep moving in and out, you'll remove the animation from the previous action in the queue. This will perform the final animation.
Copy Code code as follows:
Function () {$ ("#1"). Dequeue (). fadeout (1000);},
Function () {$ ("#1"). Dequeue (). fadeIn (1000);}
But the more troublesome situation appears, when constantly moving into the move out of the mouse, sometimes the picture is gone, sometimes the same. What's going on?
And then think about using: Stop (), define:
Stops all the currently running animations on all specified elements.
If any animations are queued to run, then they'll begin immediately.
Copy Code code as follows:
Function () {$ ("#1"). Stop (). fadeout (1000);
Function () {$ ("#1"). Stop (). FadeIn (1000);
I'll stop all the queues in front of me, finally. But there is a picture of light to half, do not move! Just like two images superimposed on the same display.
What's going on?
The picture will not display properly until I add a parameter to the stop.
Clearqueue (optional) Boolean
If set to True, the queue is emptied. You can end the animation immediately.
Gotoend (optional) Boolean
Let the currently executing animation finish immediately, and reset the original style of show and hide, call the callback function, and so on.
Copy Code code as follows:
Function () {$ ("#1"). Stop (True,true). fadeout (1000);},
Function () {$ (' #1 '). Stop (True, true). FadeIn (1000);}
But this will appear execution finished, suddenly show the whole picture of the situation, there is no fade in the effect of that.
No way, only the use of animate.
Copy Code code as follows:
Function () {$ (#1). Stop (). Animate ({' opacity ': 0}, 1000);},
Function () {$ (#1). Stop (). Animate ({' Opacity ': 1}, 1000);}
Or:
Function () {$ ("#1"). Animate ({' opacity ': 0}, {queue:false, duration:1000});
Function () {$ ("#1"). Animate ({' Opacity ': 1}, {queue:false, duration:1000});}
This achieves the desired perfect effect.
To sum up, using the stop and dequeue theory is OK, but why is it wrong? I'm not sure, I guess it's the jquery library problem.
This is to check the original file to find the problem. But use Fadein and fadeout to really pay attention later. Of course, a friend of the Oak Lodge
"JQuery implementation of the picture carousel effect" is certainly a good example, until I change the time to 2000 to see the delay. The only people I've been trying to find are
That way, the rest of the people will be set for such a long time. Interested friends can go to Oak hut to learn a simple and beautiful practical example.
