JQuery's method of moving the mouse over the image display description Layer
This example describes how JQuery allows you to move the mouse over an image to display the description layer. Share it with you for your reference. The details are as follows:
This can be used with JQuery easing animations.
The main code is as follows:
?
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$ (". Item"). hover ( Function () { // $ (This). children ("img"). stop (). animate ({opacity: 0.8}, 700, "easeInSine "); $ (This). children ("div. title"). stop (). animate ({top: 0}, 700, "easeOutBounce "); $ (This). children ("div. desc"). stop (). animate ({bottom: 0}, 700, "easeOutBounce "); }, Function (){ // $ (This). children ("img"). stop (). animate ({opacity: 1}, 700 ); $ (This). children ("div. title"). stop (). animate ({top:-60}, 500 ); $ (This). children ("div. desc"). stop (). animate ({bottom:-40}, 400 ); } ); |
I hope this article will help you with jQuery programming.