2018年04月6日网站服务器迁移完成……

jq实现果冻抖动效果

Css 苏 demo 2197℃ 0评论

<!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;
backgroundcolor:#7DBB00;
height:150px;
border:1px #ccc solid;
mozborderradius: 5px;
khtmlborderradius: 5px;
webkitborderradius: 5px;
borderradius: 10px;
opacity:0.8;
}
</style>
</head>

<body style=backgroundcolor:#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>

打赏

转载请注明:苏demo的别样人生 » jq实现果冻抖动效果

   如果本篇文章对您有帮助,欢迎向博主进行赞助,赞助时请写上您的用户名。
支付宝直接捐助帐号oracle_lee@qq.com 感谢支持!
喜欢 (0)or分享 (0)
发表我的评论
取消评论
表情