jQuery的animate函数实现图文切换动画效果

前端之家收集整理的这篇文章主要介绍了jQuery的animate函数实现图文切换动画效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在一些图片网站上我们可以看到在展示图片的时候,用鼠标轻轻滑上图片可以看到该图片文字介绍信息,其实用jQuery的animate函数就可以实现这样一个动画过程。

强震摧毁加勒比海小国海地@H_502_4@

今年,战争、经济动荡和自然灾害席卷全球,制造了无数的伤痛;但是,在痛苦的同时仍有明亮的瞬间存在。

我们用一个DIV.wrap放置一张图片,以及一个需要覆盖的div.cover,cover里面放置图片的介绍信息,支持任意标准的html内容。然后将上述代码复制多个,排列成一组图片

CSS@H_502_4@

我们需要用CSS将.wrap排成行,并且要将.cover覆盖层隐藏一部分,当鼠标滑上去是通过调用jquery才显示出来。

值得注意的是,隐藏.cover一部分使用了position:absolute绝对定位,将覆盖层.cover只显示标题部分,只需设置top:170px,因为这个.wrap的高度是200px,而标题h3的高度为30px,相减得之。

jQuery @H_502_4@

首先我将覆盖层的透明度设置为0.8,然后当鼠标滑上图片时,使用hover函数调用animate动画。

animate函数是jQuery用于创建自定义动画的函数。这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

以上所述就是本文的全部内容了,希望大家能够喜欢、

原文链接:https://www.f2er.com/jquery/54528.html

猜你在找的jQuery相关文章