Как можно исправить сие JS недоразумение?

Question

[Гриша Никольский]

Здравствуйте. Верстал себе спокойно сайт, написал небольшой скриптик. Сижу, радуюсь, что все работает.
Но не тут-то было...
https://jsfiddle.net/p5Ln9qn0/

При наведении на кружочек вместо картинки должна появляться надпись. И все бы хорошо, но если быстро навести, затем убрать мышь и снова навести, то отобразятся картинка вместе с текстом одновременно. Надеюсь, понятно объяснил(слава богу есть jsfiddle).

Как можно исправить этот баг?
Заранее спасибо!

Answer 1

[Александр Вульф]

Зачем тут JS? Юзай transitions (пример накидал на коленке).
https://jsfiddle.net/JWo1F/p5Ln9qn0/1/

Comments

[Гриша Никольский]

Я всю жизнь на PHP прогал под WordPress. И с моим программистским складом умы проще понять JS, чем разбираться в CSS.

Answer 2

[Андрей]

По вашему вопросу. Нужно остановить анимацию элемента stop():

$('.circle').hover(
    function() {
        $(this).animate({backgroundColor: '#F9EC7C'}, $duration);
        $(this).find('img').stop().fadeOut($duration, function () {
            $('.circle').find('p').fadeIn($duration);
        })
    },
    function(){
        $(this).animate({backgroundColor: '#f8f991'},$duration);
        $(this).find('p').fadeOut($duration, function(){
            $('.circle').find('img').stop().fadeIn($duration);
        });
    }
);

Answer 3

[Андрей Федоров]

Зачем тут в принципе js?
codepen.io/aliencash/pen/GopdQw

Comments

[Гриша Никольский]

Я всю жизнь на PHP прогал под WordPress. И с моим программистским складом умы проще понять JS, чем разбираться в CSS.

Answer 4

[Maxim Nepritimov]

Можно сделать флаг и проверять его состояние при наведении.