When you see the icons of some flash websites, the icon changes slowly as soon as you move the mouse on it, and the icon changes slowly when you move it back. It is very beautiful. I plan to use jquery to check whether it can achieve similar results. You can pull two pictures as needed:
Copy the Code as follows:
<Div id = "div">
</Div>
In this way, the first image will overwrite the second image. Then, as long as I fade in and fade out the first image, the special effect will be realized. Therefore, hover, fadein, and fadeout are used for simple implementation.
Copy the Code as follows:
$ (Document). ready (function (){
$ ("Div"). hover (
Function () {$ ("#1"). fadeout (1000 );},
Function () {$ ("#1"). fadein (1000 );}
);
});
However, this problem arises if I move the mouse over the image without stopping. Then, when all the animations enter the queue, the animation will remain in motion, which is hard to see.
So I plan to use: dequeue (), define: removes a queued function from the front of the queue and executes it.
I want to delete the animation of the previous operation in the queue without stopping moving in and out. This will execute the final animation.
Copy the Code as follows:
Function () {$ ("#1"). dequeue (). fadeout (1000 );},
Function () {$ ("#1"). dequeue (). fadein (1000 );}
However, it is even more troublesome. When you move the mouse continuously, sometimes the image is gone, and sometimes it remains the same. What's going on?
Then I want to use: stop () and define:
Stops tutorial all the currently running animations on all the specified elements.
If any animations are queued to run, then they will begin immediately.
Copy the Code as follows:
Function () {$ ("#1"). stop (). fadeout (1000 );},
Function () {$ ("#1"). stop (). fadein (1000 );}
I will stop all the queues above. Now, I can! However, the image is half as pale as it does not move! Just as two images are superimposed and displayed.
Why?
The image will not be displayed until I add parameters in stop.
Clearqueue (optional) boolean
If it is set to true, the queue is cleared. The animation can be ended immediately.
Gotoend (optional) boolean
Immediately complete the animation being executed, reset the original style of show and hide, and call the callback function.
Copy the Code as follows:
Function () {$ ("#1"). stop (true, true). fadeout (1000 );},
Function () {$ ("#1"). stop (true, true). fadein (1000 );}
However, when the execution is complete and the entire graph is displayed suddenly, there will be no effect like fading in or out.
No way. You only need to use animate.
Copy the 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 });}
View A Fade-in and fade-out instance
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-
Transitional. dtd ">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/>
<Title> jquery fade-in and fade-out, expand and contract menu </title>
<Style type = "text/css tutorial">
Ul li {list-style: none ;}
Ul li. menu {position: relative; width: 120px ;}
Ul li. menu ul {display: none; text-align: center; background: # fff; border: 1px solid # ddd; width: 100px; padding: 5px ;}
Ul li. menu ul li {padding: 5px 0; border-bottom: 1px dotted # ddd ;}</style>
<Script language = "webpage effects" src = "/jquery/jquery-1.3.2.min.js"> </script>
<Script language = "javascript" type = "text/javascript">
$ (Document). ready (function (){
$ (". Menu"). hover (
Function (){
// $ (". Content"). fadein (800); // fade in
$ (". Content"). slidedown (800); // expand
}, Function (){
// $ (". Content"). fadeout (1000) // fade out
$ (". Content"). slideup (1000) // Contract
});
})
</Script>
</Head>
<Body>
<Ul>
<Li class = "menu">
<A> pop-up menu </a>
<Ul class = "content">
<Li> <a href = "#"> menu content 1 </a> </li>
<Li> <a href = "#"> menu content 2 </a> </li>
<Li> <a href = "#"> menu content 3 </a> </li>
<Li> <a href = "#"> menu content 4 </a> </li>
<Li> <a href = "#"> menu content 5 </a> </li>
</Ul>
</Li>
</Ul>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
