Остановить анимацию jQuery преждевременно

Question

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

По сути, я помещаю полупрозрачный белый прямоугольник поверх изображения, чтобы оно появилось «на заднем плане». Я хочу сделать это плавно, и вот тут-то и появляется fadeIn. Однако из-за ошибки IE вместо этого я был вынужден fadeIn совершенно непрозрачный белый прямоугольник поверх изображения, что, к сожалению, исчезло. Хотя это выглядит значительно лучше и почти то, что я ищу, это все же не приемлемо. Пользователь должен иметь возможность видеть НЕКОТОРОЕ изображение на странице, хотя и в фоновом режиме.

Так что мой вопрос таков:

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

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

Спасибо!

Answer 1

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

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

Answer 2

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

Это синтакс:

.fadeTo( duration, opacity, [ callback ] )

Answer 3

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

Answer 4

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

.stop( [ clearQueue ], [ jumpToEnd ] )

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

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