Отмена fadeOut() при наведении на блок

260

20 августа 2017, 07:01

Имеется код:

$('.button').on('click', function() { 
  $('.response').text('Success'); 
  if ($('.response').fadeIn()) $('.response').delay(1000).fadeOut(); 
});

.button { 
  width: 100px; 
  height: 20px; 
  background: gray; 
} 
 
.response { 
  display: none; 
  width: 100px; 
  height: 100px; 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="button">Click Me</div> 
<div class="response"></div>

Как сделать так, чтобы анимация отменялась при наведении на блок .response, и как только мышь за границами .response .fadeOut() срабатывал?

Answer 1

Используйте для этого setTimeout() и clearTimeout():

var timeout; 
$('.button').on('click', function() { 
  $('.response').text('Success'); 
  $('.response').fadeIn(); 
  timeout = setTimeout(function() { 
    $('.response').fadeOut(); 
  }, 1000); 
}); 
 
$('.response').on('mouseover', function() { 
  clearTimeout(timeout); 
}).on('mouseout', function() { 
  timeout = setTimeout(function() { 
    $('.response').fadeOut(); 
  }, 1000); 
});

.button { 
  width: 100px; 
  height: 20px; 
  background: gray; 
} 
 
.response { 
  display: none; 
  width: 100px; 
  height: 100px; 
  background: red; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="button">Click Me</div> 
<div class="response"></div>