jQuery's animate function realizes image and text switching animation effect_jquery

On some picture websites, we can see that when displaying pictures, you can see the text introduction information of the picture by gently sliding the mouse over the picture. In fact, such an animation process can be realized by using jQuery's animate function.

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3>强震摧毁加勒比海小国海地</h3> 
    <p>今年，战争、经济动荡和自然灾害席卷全球，制造了无数的伤痛；但是，在痛苦的同时仍有明亮的瞬间存在。</p> 
    <p><a href="#">查看详情</a></p> 
  </div> 
</div>

We use a DIV.wrap to place an image, and a div.cover that needs to be covered. The cover places the introduction information of the image and supports any standard html content. Then copy the above code multiple times and arrange them into a group of pictures.

CSS

We need to use CSS to line up the .wrap and hide part of the .cover overlay. When the mouse slides up, it will be displayed 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 the hidden .cover part uses position:absolute absolute positioning. The overlay .cover only displays the title part. You only need to set top:170px, because the height of this .wrap is 200px, and the title h3 is The height is 30px, subtracted.

jQuery

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

$(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 jQuery uses to create custom animations. The key to this function is to specify the animation form and result style attribute objects. Each property in this object represents a style property that can change (such as "height", "top", or "opacity"). The value of each attribute indicates the value of this style attribute when the animation ends. If it is a numeric value, the style property will gradient from the current value to the specified value. If a string value such as "hide", "show", or "toggle" is used, the default animation form is invoked for the property.

The above is the entire content of this article, I hope you all like it,