jQuery淡入透明条缩略图动画
淡入动画的缩略图广告图，视觉上挺抓眼的，用在产品展示页、活动 banner 都挺合适。jQuery配合几个样式和交互逻辑，就能轻松搞定。你只要准备好图片，结构搭好，动画效果交给.fadeTo()就行，鼠标一滑过去，透明条淡淡浮现，还挺有高级感的。
结构部分其实不复杂，一组图片加个包裹容器就行，建议用 交互方面，jQuery就挺好使的， 响应式这块也别忽视，用点 实用场景挺多的，像产品详情页、服务推荐区，或者首页头图轮播里的小缩略导航，都能用上。如果你还想拓展玩法，像加个点击切换大图、支持手势滑动，那就可以往插件方向去搞，比如这个 jQuery 淡入淡出带缩略图的轮播插件，也是不错的拓展版本。包图片，这样可以灵活加上覆盖层。CSS 那块，用
position: absolute让透明条定位到底部，再配合opacity玩转淡入淡出，视觉效果立马有了层次感。
.hover()配合.fadeTo()，响应也快，动画也顺滑。如果你怕动画卡顿，记得加上.stop()，不然频繁滑动的时候动画堆在一起，看着就不太舒服。media queries和百分比布局，缩略图在手机上也能乖乖排好队。要是图片多，还可以搭配.lazyload()插件，等滑到视口再加载，页面打开更快，体验感也更好。
下载地址
用户评论
