Преждевременная остановка анимации jQuery

StackOverflow https://stackoverflow.com/questions/2556689

Вопрос

Я пытаюсь затухать в прозрачном формате png с помощью jQuery.Конечно, это выглядит гладко в Firefox, но значительно менее приемлемо в IE (7 и 8).Это известная ошибка в IE, и, к сожалению, обходного пути, похоже, не так уж много.

По сути, то, что я делаю, - это помещаю полупрозрачный белый прямоугольник поверх изображения, чтобы оно выглядело "на заднем плане".Я хочу сделать это плавно, и вот тут-то и вступает в дело фадеИн.Однако из-за ошибки IE я был вынужден вместо этого создать полностью непрозрачный белый прямоугольник поверх изображения, из-за чего оно, к сожалению, исчезло.Хотя это выглядит значительно лучше и является ПОЧТИ тем, что я ищу, это все равно неприемлемо.Пользователь должен иметь возможность видеть КАКОЕ-ЛИБО изображение на странице, хотя и в фоновом режиме.

Итак, мой вопрос заключается в следующем:

Есть ли способ остановить функцию fadeIn (или любую анимацию jquery, на самом деле) после анимации в течение 75% ожидаемого времени анимации?

Это оставило бы мое изображение на 75% смешанным с белым прямоугольником, и мне не пришлось бы иметь дело с неприятной ошибкой IE в формате transparent png.

Спасибо!

Это было полезно?

Решение

Вы могли бы использовать непрозрачное изображение и просто анимировать его непрозрачность до 75%.

  $('#overlay').animate({
    opacity: 0.75
  }, 5000, function() {
    // Animation complete.
  });

Другие советы

Вместо fadeIn/fadeOut используйте оживлять функция для анимации свойства непрозрачности до желаемого уровня.

Вы также можете использовать фадеТо функция.

Это и есть синтакс:

.fadeTo( duration, opacity, [ callback ] )

Не рекомендуется для вашей ситуации, но вот фактический ответ на ваш заданный вопрос :-)

.stop( [ clearQueue ], [ jumpToEnd ] )

Когда .stop() вызывается для элемента, выполняемая в данный момент анимация (если она есть) немедленно останавливается.Если, например , элемент скрывается с помощью .slideUp() при вызове .stop() элемент теперь все еще будет отображаться, но будет составлять часть от его предыдущей высоты.Обратный вызов функции не вызываются.

http://api.jquery.com/stop/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top