使用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>