jq实现果冻抖动效果

jq代码实现的果冻抖动效果：http://www.huiyi8.com/js/
 
<!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;
    
    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="">
<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>
posted @ 2014-12-01 20:41  乐活人生  阅读(413)  评论(0)    收藏  举报