Кроссбраузерная анимация перехода jQuery?

Question

Существуют ли какие-либо анимационные переходы jQuery 1.3, которые работают как в Firefox 3, так и в IE7?

У меня есть таблица с несколькими строками таблицы (25 или более), причем некоторые строки начинаются скрытыми (все эти строки имеют общий класс; в данном примере это ".hidden"). В заголовке таблицы есть ссылка «Показать больше», которая связана через .click () с функцией, которая будет показывать скрытые строки, а затем изменить «Показать больше» на «Показать меньше» и изменить .click () на функция, которая делает противоположное.

В каждой функции .click () есть строка типа

$(this).parents("tbody").children("tr.hidden").show();

с заменой .show () на .hide () для функции «Показать меньше».

Однако, если я попытаюсь заменить .show () /. Hide () на .fadeIn () /. FadeOut (), IE отобразит его почти идентично .show () /. Hide (), за исключением минута, чтобы .hide () вступил в силу. Там нет настоящей анимации. Уступает в IE, хотя отлично работает Firefox.

Если я попытаюсь использовать .slideDown () /. SlideUp (), то же самое в IE будет зависать, почти идентично .show () /. Hide (), за исключением странного пульсирующего эффекта сразу после завершения перехода. Firefox 3 также подавляет его, по-видимому, просто забывая о ширине строк отображаемых строк таблицы и заставляя все это выглядеть ужасно.

Так анимации просто отстой в IE7? Есть ли способ получить плавный и плавный переход в этом случае, который будет работать в обоих браузерах?

Answer 1

Часто наличие нескольких одновременных анимаций может быть трудным для IE. Движок Javascript просто не похож на Safari, Firefox или Chrome. Это касается IE6 и IE7. Я еще не работал с IE8.

Одна вещь, которая может немного помочь, это установка статических высот на элементы, которые вы пытаетесь анимировать. С точки зрения CSS / макета это обычно не идеально, но ... это позволяет jQuery пропустить задачу, состоящую в том, чтобы сначала вычислить высоту каждого элемента, прежде чем он анимирует высоту элемента.

В общем, вы можете подходить к анимации так же, как к зеркальной камере. (Оставайтесь со мной здесь). Если вы пытаетесь делать быстрые снимки спортивного события, любой фотограф посоветует заранее настроить фокус, ISO и выдержку. Таким образом, камера не должна вычислять все эти вещи между каждым снимком, и вы можете просто удерживать кнопку спуска затвора и щелчок щелчок щелчок щелчок. Стиль A-Team.

В любом случае, когда дело доходит до анимации, попробуйте подумать о вещах, которые javascript должен вычислить для анимации. Непрозрачность, высота, вычисленная высота (ширина элемента + рамка + отступ), положение экрана - все это хорошие места для начала.

Часто вы можете увидеть, что jQuery добавляет в DOM при запуске анимации (используя Firebug ). Например, на анимации непрозрачности вы можете увидеть style = "opacity: 1;" добавляется непосредственно перед началом отсчета до 0.

Answer 2

Я бы не был слишком откровенен, когда говорил о производительности в разных браузерах. Честно говоря, я видел несколько тяжелых JS-анимаций, которые заставили бы плакать webkit, в то время как FF и IE справляются с этим довольно хорошо.

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

Возьми IE. Если у вас есть элемент уровня блока 4000x4000 и прозрачный gif 2x2, настроенный на повторение, каждый раз, не дай бог, переместите элемент, IE будет перерисовывать gif 2x2 и вычислять альфа для каждого, 2000 раз. FF либо кеширует фон, либо имеет совершенно другую перерисовку, в любом случае исполнения несопоставимы. В руководстве не сказано, что вы просто должны быть осторожны, как и что вы делаете.

Answer 3

Согласно странице совместимости jQuery такого рода ошибки являются ошибкой, о которой следует сообщать.