jQuery: исчезает из текущей непрозрачности

Question

Я угасаю объект с 0% до 100% на mouseOver, и постепенно исчезаю до 0% на mouseOut.

Когда я делаю быстрые mouseIn и mouseOut, эффект «прыгает», потому что mouseOut исчезает со 100% - и потому что я делаю быстрые mouseIn и mouseOut, исчезновение не происходит. не исчезают до 100%. Может быть, он только исчезает до 25% или 10%.

Мой вопрос: Как сделать так, чтобы затухание только затухало от определенного процента?

Если fadeIn получает только 20, то fadeOut должно fadeOut из 20.

Answer 1

Используйте jQuery .fadeTo() метод , который позволяет установить целевую непрозрачность.

$('selector').fadeTo('slow', 1);
$('selector').fadeTo('slow', 0);

Первый аргумент - скорость, второй - непрозрачность.

---

Если вы используете .hover(), вы можете сделать это так:

Пример: http://jsfiddle.net/ecUdS/

$('selector').hover(function( evt ) {
    $(this).stop().fadeTo('slow', evt.type === 'mouseenter' );
});

использует .stop(), чтобы остановить анимацию, если она запущена.

Затем , потому что .hover() сработает как для mouseenter, так и mouseleave, я добавил тест, где, если это mouseenter, он отправит true (что будет равно до 1). В противном случае он отправляет false или 0.

Answer 2

Я не уверен, как выглядит ваш текущий код, но вы захотите использовать функцию jQuery .animate ():

http://api.jquery.com/animate/

Вот пример:

$('#object').mouseover(function() {
  $(this).animate({
    opacity: 1,
  }, 1000, function() {
    //completion code?
  });
});

$('#object').mouseout(function() {
  $(this).animate({
    opacity: 0,
  }, 1000, function() {
    //completion code??
  });
});

Answer 3

Вы можете попробовать сделать:

$('#element').animate({opacity:0});

... вместо fadeOut ().

Answer 4

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

http://jsfiddle.net/3AxHb/