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

Source: Internet
Author: User
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.


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.


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,

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.