0

Я использую переход на hover css. Но мне нужно поддерживать min ie 8. Я хочу добавить резерв jquery, так что, если переход css не работает, начнется работа jquery animation. Пожалуйста, проверьте этот переход css skew, мне нужно преобразовать эту анимацию в jquery.Как добавить резерв jquery для перехода css skew?

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, поэтому я действительно буду увлекаться, если вы поможете мне.

ответ

0

Вы можете проверить this на предмет перекоса, но я не знаю, что вы найдете какой-либо запас для вобуляции. Вы можете попробовать использовать что-то вроде this. Но, пожалуйста, запомните принципала graceful degradation - кроссбраузер не нужен (и часто должен нет) средний кросс-браузер идентичный.