JQuery method to implement mouse movement to display description layer of pictures_jquery

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.