在一些图片网站上，我们可以看到当你展示图片时，你可以看到鼠标轻轻地在图片上显示文字介绍信息。实际上，使用jQuery的动画功能可以实现这样一个动画过程。





强地震摧毁了加勒比海的小海地
今年，战争、经济动荡和自然灾害席卷全球，造成了无数的伤害，但同时仍有痛苦的瞬间。
查看详情






我们用一个div.wrap放置图片，和div.cover需要覆盖。在封面中，我们引入图片表示信息来支持任何标准HTML内容。

CSS



我们需要用CSS排成一行，并隐藏一部分覆盖层，当鼠标滑动时，通过调用jQuery来显示它。




。包{位置：相对；浮动：左；宽度：200px；高度：200px；保证金：5px；
背景：# e8f5fe；溢出：隐藏；}
img {位置。包装：绝对；顶：0；左：0 }
。包H3 {线高度：30px；字体大小：14px；颜色：# FFF }
。包p {线高度：20px }
。盖{位置：绝对；背景：# 000；高度：120px；宽度：100%；
填料：3px；顶部：170px；}



值得注意的是隐藏的那一部分。盖位置：绝对定位和覆盖。覆盖只显示标题的一部分，只是机顶：170px，因为这个高度。包是200px，和头H3高度30px，这是降低到相同的水平。



jQuery



首先，我把盖层的透明度为0.8，然后当鼠标滑到图片，悬停功能调用动画动画。




$（函数（）{（））
$（）。Css（不透明
$（）。Hover（函数（）{）
$（）
}函数（）{（）
$（）
}）；
}）；



动画函数jQuery使用创建自定义动画。这个功能的关键在于指定动画的形式和结果样式属性的对象。这个对象的每个属性代表一个变量的样式属性（如高度，顶部，或透明度）。每个属性的值表示的动画结束时的样式属性是多少。如果一个值是一个值，样式属性逐渐从目前的值更改为指定的值。如果一个字符串值，如隐藏、显示或切换时，默认的动画形式将被称为这个属性。

这一切都是本文的全部内容。我希望你能喜欢它。