Остановите анимацию 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/