JQuery's animation function achieves graphic-text switching animation effect _ jquery

Animate () is used as a method in jquery to create an animation effect () the method adds a good visual effect to the page. on some Image websites, we can see the text description of the image with the mouse slide, in fact, you can use the animate function of jQuery to implement such an animation process.

      
The earthquake destroyed Haiti, a small Caribbean country.
This year, war, economic turmoil, and natural disasters swept across the world, creating countless pains. However, there are still bright moments while suffering.
     
View details
   
 

We use a DIV. wrap to place an image, as well as a p. cover to cover the introduction information of the image, supporting any standard html content. Copy the preceding code into a group of images.

CSS

We need to use CSS to arrange. wrap and hide a part of the. cover overlayer. it is displayed only when the mouse slides up by calling jquery.

.wrap{position:relative; float:left; width: 200px; height:200px; margin:5px; background:#e8f5fe; overflow:hidden;} .wrap img{position:absolute; top:0; left:0} .wrap h3{line-height:30px; font-size:14px; color:#fff} .wrap p{line-height:20px} .cover{position:absolute; background:#000; height:120px; width:100%; padding:3px; top:170px; } 

It is worth noting that it is hidden. the cover part uses the position: absolute positioning to cover the layer. cover only displays the title. you only need to set top: 170px, because this. the height of wrap is 200px, and the height of the title h3 is 30px.

JQuery

First, I set the transparency of the overwriting layer to 0.8, and then use the hover function to call the animate animation when the mouse slides.

$(function(){   $(".cover").css("opacity",.8);   $(".wrap").hover(function(){     $(".cover", this).stop().animate({top:"80px"},{queue:false,duration:160});   },function(){     $(".cover", this).stop().animate({top:"170px"},{queue:false,duration:160});   }); }); 

The animate function is a function used by jQuery to create custom animations. The key to this function is to specify the animation form and result style attribute object. Each attribute in this object represents a changeable style attribute (such as "height", "top", or "opacity "). The value of each attribute indicates the animation ends when the style attribute is reached. If it is a value, the style property will gradually change from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation format is called for this attribute.

The above is all the content of this article,