使用animate.css实现翻转/抖动特效
.houverlxx是父元素 其他两个元素是子元素,使用定位
$(function(){
$(".houverlxx").hover(function(){
// floor-goods-item消失 floor-goods-item2 显示
$(this).children('.floor-goods-item').addClass('animated fadeOut');
var _this = $(this);
setTimeout(function function_name(argument) {
_this.children('.floor-goods-item').hide();
_this.children('.floor-goods-item').next().show().addClass('animated flipInY');
},200);
},function(){
$(this).children('.floor-goods-item2').hide();
var _this = $(this);
_this.children('.floor-goods-item').show();
_this.children('.floor-goods-item').addClass('animated flipInY');
});
})
其他,元素抖动
<style type="text/css">
@-moz-keyframes tada{
0%{-moz-transform:scale(1);}
10%,20%{-moz-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-moz-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-moz-transform:scale(1.2) rotate(-3deg);}
100%{-moz-transform:scale(1) rotate(0);}
}
@-webkit-keyframes tada{
0%{-webkit-transform:scale(1);}
10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);}
30%,50%,70%,90%{-webkit-transform:scale(1.2) rotate(3deg);}
40%,60%,80%{-webkit-transform:scale(1.2) rotate(-3deg);}
100%{-webkit-transform:scale(1) rotate(0);}}
.doudun {
-webkit-animation: tada 1s .2s infinite ease both;
-moz-animation: tada 1s .2s infinite ease both;
}
</style>