jq 抖动效果
1 .html
<div style="margin:50px auto;width:900px;overflow:visible;">
<div id="test_01" class="test"></div>
<div id="test_02" class="test"></div>
<div id="test_03" class="test"></div>
<div id="test_04" class="test"></div>
<div id="test_05" class="test"></div>
<div id="test_06" class="test"></div>
</div>
2. css
<style>.test{
margin:10px 0px;
background-color:#7DBB00;
height:150px;
border:1px #ccc solid;
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 10px;
opacity:0.8;
}</style>
3. js
<script>$('.test').hover(function(){
$(this).animate({
width: 920,
height: 170,
marginLeft: -20,
opacity:0.8
}, 100 ).animate({
width: 910,
height: 160,
marginLeft: -10,
opacity:0.9
}, 100 ).animate({
width: 920,
height: 170,
marginLeft: -20,
opacity:1
}, 100 )
},function(){
$(this).stop(true).animate({
width: 900,
height: 150,
marginLeft: 0,
opacity:0.8
}, 100 );
});</script>
最新文章
- leetcode 111 minimum depth of binary tree
- Effeckt.css – CSS3 Transitions &; Animations 精妙应用
- Activiti 学习笔记记录
- windows 我的电脑右键 无法打开管理窗口
- org.apache.cxf.interceptor.Fault: No such operation
- 编译php5.6
- 企业移动互联网O2O微信支付流程图
- 仿新浪微博短网址PHP实现方案
- HTTP协议详解(四)
- Java提高班(一)Thread详解
- python(leetcode)-重复元素算法题
- Codeforces997D Cycles in product 【FFT】【树形DP】
- 20155216 Exp2 后门原理与实践
- the cause of StringBuild class
- PSO算法的改进(参数)
- 实践lnmpde 的安装
- Day22-Django之信号
- 关于ROS的MANGLE和ip route-rules-lookup的关系和区别
- [PY3]——Python的函数
- 【转载】Vue 2.x 实战之后台管理系统开发(二)
热门文章
- Linux系统下tomcat安装配置
- 性能分析工具gprof介绍(转载)
- Quartz学习记录
- c# 调用声音文件
- K-均值聚类(K-means)算法
- HTML实例 - 购物商场页面
- iis启动&;nbsp;服务无法在此时接受控制信息。&;nbsp;(异常来自&;nbsp;HRESULT:0x80070425)
- python 操作 mysql 数据库 datetime 属性字段为 0000-00-00 00:00:00 的问题
- mono安装
- python16_day35【算法】