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

Question

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

У меня есть таблица с несколькими строками таблицы (25 или более), причем некоторые строки начинаются скрытыми (все эти строки имеют общий класс; в этом примере это " .hidden " ). В заголовке таблицы есть & Quot; Показать больше & Quot; ссылка, которая связана с помощью .click () на функцию, которая покажет скрытые строки, а затем изменит " Show more " & показать меньше " и измените .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

По словам страницы совместимости jQuery , это ошибка и о ней следует сообщать.

Answer 2

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

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

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

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

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

Answer 3

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

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

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