jQuery: дождитесь завершения анимации css до изменения другого атрибута css

У меня есть стопка изображений, абсолютно расположенных в одном и том же месте, и у меня есть только одно изображение, видимое за раз, установив zIndex = -1 для всех изображений, но видимый. На другой стороне страницы у меня есть список всех имен изображений, и когда я нахожусь на определенном имени изображения, я хочу, чтобы это изображение стало видимым, затухая, а ранее видимое - исчезнуть. Я делаю это с помощью этого кодаjQuery: дождитесь завершения анимации css до изменения другого атрибута css

$(this).hover( //visible and hover below are variable names 
     visible.css({opacity: '0',zIndex: '-1'}); //the previous image diassapears 
     hovered.css({ zIndex: '1', opacity: '1'}); //the new image fades in 
    )

и путем преобразования свойства непрозрачности через css. Проблема заключается в том, что, когда я нахожусь над новым именем изображения, старое изображение просто исчезает, не исчезая, и новый начинает исчезать. Я полагаю, что старое изображение действительно исчезает, но оно делает это в фоновом режиме из-за к zIndex = -1 становится сразу же эффективным. Я хотел бы попросить наилучший способ решить эту проблему. Пожалуйста, обратите внимание, что я хочу сделать это без использования анимации jQuery и использовать только чистую анимацию css, чтобы использовать (минимально) более высокую скорость анимации css. Поэтому предпочтительным будет решение, которое практически не требует вычислительных затрат (так что анимация css в этом случае по-прежнему остается выгодной).

источник

2012-05-02 Nikolaos Kakouros

Вы должны применить z-index:-1 после того, анимированные назад к непрозрачности 0, в противном случае это просто " popping "ниже, не показывая изменение непрозрачности.

Вам нужно активировать событие перехода. См. this SO post о нормализации этого события для всех браузеров.

Но как только вы работаете, что из, его в основном только прикрепления единоразового события с обратным вызовом установив окончательный Z-индекс - что-то вроде этого:

visible.one('transitionEnd', function(){ 
    visible.css('z-index', -1); 
}).css('opacity', 0);

Вам просто нужно использовать скрипт в других SO, чтобы получить нормализованное событие 'transitionEnd'.

Надеюсь, это поможет!

источник

2012-05-02 23:59:36 sic1

Отлично. Но как насчет какой-либо вычислительной нагрузки? Сохраняет ли этот метод css-переходы быстрее, чем анимация jQuery? –

Ну, запустив css-переход, анимация теперь аппаратно ускорена - так, что она выглядит лучше. И я думаю, что они выглядят намного лучше. Я специально не сталкивался с проблемами производительности с помощью этого метода, он действительно должен быть лучше, чем просто анимация jQuery, потому что анимация jQuery просто устанавливает css непрозрачности несколько раз, чтобы сделать ее анимированной - переход css обрабатывается браузером что делает его более гладким. – sic1

Думаю, лучший вопрос в том, что вы (или ваш клиент) будете расстроены, если ваши анимации не работают в ie7 и 8. Если это проблема, вам либо нужно использовать jquery-анимацию, либо просмотреть дополнительные полины - у меня есть некоторые из них заполнят setTimeout для запуска обратного вызова перехода, если вы находитесь в старом браузере, который не поддерживает события перехода. – sic1

использование animate - это приходит с управлением очередью и поддержкой обратной вызова «из коробки»

источник

2012-05-02 23:51:21

Я думаю, что анимация() использует анимацию jQuery, нет? Я хочу использовать собственные css-переходы. –

jQuery: дождитесь завершения анимации css до изменения другого атрибута css

ответ

Смежные вопросы