Как предотвратить парящую анимацию от возможного исчезновения

Question

У меня есть код для наведения изображения, который будет отображать информацию поверх изображения при наведении курсора. Используя queue: false в обратном вызове, я не позволяю анимациям запускаться снова и снова, когда пользователь наводит на них курсор несколько раз.

Моя проблема в том, что если кто-то немного с ума сошел с помощью mouseOverING, исчезновение / исчезновение состояния при наведении уменьшит непрозрачность информации до тех пор, пока изображение при наведении больше не будет видно.

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: "show"
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

Вот мой jsfiddle, если вам хочется поиграть.

http://jsfiddle.net/bkbarton/qrprD/

Спасибо

Answer 1

Отправить непрозрачность до 1, а не «показать». «Show» может использовать текущую максимальную непрозрачность в качестве непрозрачности, к которой нужно постепенно исчезнуть, поэтому, если она исчезает, а текущая непрозрачность равна .5, она будет отображаться, если она постепенно уменьшится до .5.

$('.image').hover(function() {
    $('.linkWords', this).animate({
        opacity: 1
    }, {
        queue: false
    });
}, function() {
    $('.linkWords', this).animate({
        opacity: "hide"
    }, {
        queue: false
    });
});

Answer 2

Попробуйте .stop(true) на элементе перед началом следующей анимации. Это остановит текущую текущую анимацию.