Здравствуйте. По порядку.
1) Странная строка:
if ($('.response').fadeIn()) $('.response').delay(1000).fadeOut();
$('.response').fadeIn()
возвращает то же самое, что $('.response')
, т.е. jQuery-объект, который, внутри условия if (){}
трансформируется в true
. И тогда использование конструкции if (){}
абсолютно излишне. Если ее убрать:
$('.response').fadeIn();
$('.response').delay(1000).fadeOut();
то ничего не изменится.
2) Как написал выше, $('.response').fadeIn()
возвращает тот же самый jQuery-объект. Таким образом, к объекту можно обратиться лишь единожды, а затем применять все необходимые методы по цепочке:
$('.response').text('Success').fadeIn().delay(1000).fadeOut();
Это не только сократит код, но и сделает его более производительным, т.к. поиск элемента в дереве документа в этом случае производится лишь единожды.
3) По вопросу:
Как сделать так, чтобы анимация отменялась при наведении на блок .response
, и как только мышь за границами .response
.fadeOut()
срабатывал?
Я переписал ваш код, работающая версия выглядит так:
var timeout;
$('.button').on('click', function() {
$('.response').text('Success').fadeIn();
timeout = setTimeout(function(){
$('.response').fadeOut();
}, 1000);
});
$('.response').on({
mouseenter: function(){
clearTimeout(timeout);
},
mouseleave: function(){
$('.response').stop().fadeOut();
}
});
Посмотреть в работе можно здесь: https://jsfiddle.net/rf6pkd7f/
Что же там происхдит:
- Как и было, по клику ставим текст "Success" и показываем через
.fadeIn()
;
- Вместо
.delay()
используем setTimeout()
, чтобы иметь возможность отменить .fadeOut()
в случае, когда курсор оказался на блоке .response
;
- Функция
setTimeout()
возвращает идентификатор таймера, который можно использовать для отмены таймера и действия, которое на нем завязано. Этот идентификатор записываем в заранее созданную глобальную переменную timeout
;
- При помощи метода
.on()
вешаем на .response
два обработчика - для событий mouseenter
и mouseleave
;
- При
mouseenter
(т.е. наведении) мы отменяем таймер функцией clearTimeout
, чтобы блок не исчез.
- При
mouseleave
(т.е. ухода курсора с элемента) останавливаем анимацию (если fadeIn()
еще не успел завершиться) методом .stop()
, после чего прячем блок при помощи .fadeOut()
.
Настоятельно рекомендую прочесть туториал по jQuery на официальном сайте, если владеете английским - https://learn.jquery.com/about-jquery/ , или что-то подобное на русском. После чего подобных вопросов у вас станет гораздо меньше.