Сначала я хочу, чтобы элемент был скрытым и запускал анимацию css, используя jquery. Если браузер не поддерживает анимацию css, мне нужно, чтобы он вернулся к простому использованию $ (element).show().
Вот моя скрипка
<div id="submit-logged-out" class="popout">
foo
</div>
#submit-logged-out {
background: #000;
color: #fff;
width:80%;
}
.popout {
animation: popout 0.25s ease;
-webkit-animation: popout 0.25s ease;
}
@keyframes popout {
from{transform:scale(0)}
80%{transform:scale(1.05)}
to{transform:scale(1)}
}
@-webkit-keyframes popout {
from{-webkit-transform:scale(0)}
80%{-webkit-transform:scale(1.05)}
to{-webkit-transform:scale(1)}
}
Просто обнаружите, что поддержка CSS поддерживается и отбрасывается, если нет:
if ('animation' in document.body.style) {
// Make sure you use all vendor prefixes
console.log('We have animations')
} else {
console.log('Fallback')
$('#submit-logged-out').show()
}
Вот демонстрация: http://jsfiddle.net/SSsVx/32/
Хорошо нашел хорошее решение
#SomeDiv{ .... }
.MyAnimation{ .... }
$('#SomeDiv').addClass('MyAnimation').show();
$('#SomeDiv').hide().removeClass('MyAnimation');
Таким образом, если анимация не поддерживается, она все еще скрывает или показывает