jQuery 视觉效果-点击图片，图片从左边消失，并从右边出现

本文主要是介绍jQuery 视觉效果-点击图片，图片从左边消失，并从右边出现，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

转自：http://www.cnblogs.com/wenzichiqingwa/archive/2012/09/10/2678325.html

HTML：

<div id="scroller1"><img src="pic1.jpg" alt="" width="150" height="150" class="oneImage"/>
</div>

CSS：

img{border: 0;/*图片要实现动画效果，必须要设置此CSS属性*/position: relative;}/*只能容纳显示一张图片*/#scroller1{                  margin: auto;/*                width: 470px;*/width: 150px;height: 150px;padding: 10px;border: 1px solid deeppink;overflow: hidden;/*设置此css属性，是为了让图片基于scroll1产生进行动画效果*/position: relative;}

jQuery：

$('.oneImage').click(function(){//向左移动，移出左边界，最后距离左边距160px.$(this).animate({'left':-160},'slow',function(){//animate回调函数，首先距离移动图片，距离左边界150px，此时在右边界处了。在移动至贴近左边界。$(this).css({'left':150});$(this).animate({'left':0}, 'slow');});});

这篇关于jQuery 视觉效果-点击图片，图片从左边消失，并从右边出现的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---