The example in this article describes the method of using JQuery to display the description layer of pictures when moving the mouse. Share it with everyone for your reference. The details are as follows:
This can be used in conjunction with JQuery easing animation.
The main code is as follows:
$(".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 be helpful to everyone’s jQuery programming.