css skew transitionにjquery fallbackを追加するには？

Question

私はホバリングCSSの切り替えに使用しています。しかし、私は分8をサポートする必要があります。jQueryのフォールバックを追加したいので、CSSの切り替えがうまくいかないと、jqueryのアニメーションが動作します。このcss skew transitionを確認してください。このアニメーションをjqueryに変換する必要があります。

CSS：

@-webkit-keyframes hvr-wobble-bottom { 
    16.65% { 
    -webkit-transform: skew(-12deg); 
    transform: skew(-12deg); 
    } 

    33.3% { 
    -webkit-transform: skew(10deg); 
    transform: skew(10deg); 
    } 

    49.95% { 
    -webkit-transform: skew(-6deg); 
    transform: skew(-6deg); 
    } 

    66.6% { 
    -webkit-transform: skew(4deg); 
    transform: skew(4deg); 
    } 

    83.25% { 
    -webkit-transform: skew(-2deg); 
    transform: skew(-2deg); 
    } 

    100% { 
    -webkit-transform: skew(0); 
    transform: skew(0); 
    } 
} 

@keyframes hvr-wobble-bottom { 
    16.65% { 
    -webkit-transform: skew(-12deg); 
    transform: skew(-12deg); 
    } 

    33.3% { 
    -webkit-transform: skew(10deg); 
    transform: skew(10deg); 
    } 

    49.95% { 
    -webkit-transform: skew(-6deg); 
    transform: skew(-6deg); 
    } 

    66.6% { 
    -webkit-transform: skew(4deg); 
    transform: skew(4deg); 
    } 

    83.25% { 
    -webkit-transform: skew(-2deg); 
    transform: skew(-2deg); 
    } 

    100% { 
    -webkit-transform: skew(0); 
    transform: skew(0); 
    } 
} 

.hvr-wobble-bottom { 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-transform-origin: 100% 0; 
    transform-origin: 100% 0; 
} 
.hvr-wobble-bottom:hover, .hvr-wobble-bottom:focus, .hvr-wobble-bottom:active { 
    -webkit-animation-name: hvr-wobble-bottom; 
    animation-name: hvr-wobble-bottom; 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-timing-function: ease-in-out; 
    animation-timing-function: ease-in-out; 
    -webkit-animation-iteration-count: 1; 
    animation-iteration-count: 1; 
} 

は、誰かが私に使用する正確なjqueryのを示してください。私はjqueryの専門家ではないので、あなたが私を助けてくれたら本当に気楽になります。

Answer 1

スキューはthisにチェックできますが、ウォーブルのフォールバックを見つけることはできません。 thisのようなものを試してみることもできます。しかし、graceful degradationのプリンシパルを覚えておいてください - ブラウザ間の互換性を必要としない（そして多くの場合、はではありません）クロスブラウザを意味します。同一です。