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>

转载于:https://www.cnblogs.com/justSmile2/p/9857232.html