JQuery implementation of mouse moving image display description layer method

  • 2020-06-22 23:28:46
  • OfStack

An example of JQuery is presented in this paper. Share to everybody for everybody reference. The details are as follows:

The animation of JQuery easing can be combined here.

The main codes are 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 has been helpful for your jQuery programming.


Related articles: