This article mainly introduces JQuery's method for displaying the description layer by moving the mouse over an image, and describes how to use jQuery mouse events and animation effects, for more information about JQuery, see the following example. 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:
$ (". Item "). hover (function () {// $ (this ). children ("img "). stop (). animate ({opacity: 0.8}, 700, "easeInSine"); $ (this ). children ("p. title "). stop (). animate ({top: 0}, 700, "easeOutBounce"); $ (this ). children ("p. desc "). stop (). animate ({bottom: 0}, 700, "easeOutBounce") ;}, function () {// $ (this ). children ("img "). stop (). animate ({opacity: 1}, 700); $ (this ). children ("p. title "). stop (). animate ({top:-60}, 500); $ (this ). children ("p. desc "). stop (). animate ({bottom:-40}, 400 );});
I hope this article will help you with jQuery programming.