jq实现果冻抖动效果
来源：互联网 发布：淘宝商城运动裤 编辑：程序博客网 时间：2024/04/25 02:25
Demo:http://zhibin07.web-159.com/test/demo.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv=Content-Type content="text/html;charset=utf-8"><script type="text/javascript"src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script><style type="text/css">.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></head><body style="background-color:#e8e8e8;"><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><script type="text/javascript">$('.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></body></html>
