jQuery's animate function realizes the toggle animation effect

In some picture websites, we can see that when displaying the picture, we can see the text introduction information of the picture by gently clicking the picture with the mouse. In fact, animate function of jQuery can realize such an animation process.

<div class="wrap"> 
  <img src="images/s1.jpg" alt="photo" /> 
  <div class="cover"> 
    <h3> A powerful earthquake devastated the small Caribbean nation of Haiti </h3> 
    <p> This year, war, economic turmoil and natural disasters have swept the world, causing untold suffering. But there are moments of light in the midst of pain. </p> 
    <p><a href="#"> Check the details </a></p> 
  </div> 
</div>

We use 1 ES6en. wrap to place 1 image, and 1 div. cover, cover to cover the introduction of the image, support any standard html content. Then copy the above code and arrange it into a group of pictures.

CSS

We need to line up.wrap with CSS, and hide the.cover overlay by 1, which is shown by calling jquery when we mouse over it.

.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.cover1 section USES position:absolute absolute positioning to overlay.cover only shows the heading section, just set top:170px, because this.wrap has a height of 200px and the heading h3 has a height of 30px, subtracting it.

jQuery

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

$(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 the function that jQuery USES to create custom animations. The key to this function is to specify the animation form and result style property object. Each attribute in this object represents a mutable style attribute (such as "height", "top", or "opacity"). The value of each property indicates how much the style property ends the animation. If it is 1, 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 this property.

That's all for this article. I hope you enjoy it.