При использовании CSS переходов / анимаций / и т. Д., Как лучше вернуться к jquery, если браузер пользователей не выполняет анимацию CSS? - PullRequest
Новая
       5

При использовании CSS переходов / анимаций / и т. Д., Как лучше вернуться к jquery, если браузер пользователей не выполняет анимацию CSS?

6 голосов
/ 10 апреля 2011

Я ищу способ использовать анимацию CSS, но если пользовательский браузер не выполняет анимацию CSS, то я должен использовать Jquery для анимации. Есть ли простой способ сделать это в Jquery? плагин был бы в порядке, если бы это был маленький плагин, но я действительно ищу какой-то способ сделать это в jquery, если это возможно. Единственная причина, по которой я хочу использовать css-анимацию, заключается в том, что при использовании css-анимации используется гораздо меньшая мощность процессора.

Ответы [ 3 ]

5 голосов
/ 10 апреля 2011

Улучшенный плагин jQuery animate использует CSS-переходы без необходимости написания специального кода для браузеров с поддержкой переходов

Альтернатива не очень обнадеживающая: вы можете добавить библиотеку обнаружения объектов, такую ​​как Modernizrа затем написать конкретный код для каждого случая, например ... 

if (Modernizr.csstransitions) {
  $("#yourdiv").css({
    "-webkit-transform" : "translate(0, 10)",
    "-o-transform" : "translate(0, 10)",
    "-moz-transform" : "translate(0, 10)",
    "-ms-transform" : "translate(0, 10)",
    "transform" : "translate(0, 10)"
});
}
else {
  //do jquery animate stuff
}
1 голос
/ 11 апреля 2011

Вы не должны заботиться об этом. Анимации не являются жизненно важными. Если вы делаете прогрессивное усовершенствование, каждый пользователь получит наилучшие впечатления, которые их браузер сможет им предоставить:).

Если вам так важна эта «мощность процессора», вы вообще не хотите использовать анимацию в IE. В противном случае используйте только jQuery, который, кажется, лучше всего подходит для ваших конкретных потребностей.

0 голосов
/ 10 апреля 2011

jQuery рекомендует использовать jQuery.support , чтобы убедиться, что некоторые функции поддерживаются браузером.Например: 

jQuery.support.opacity //returns true/false

Core jQuery не дает возможности тестировать свойства CSS3, но плагины делают.Некоторые из таких плагинов можно найти в комментариях после описания функции (например, this )

...