Блог

Главная - Вопросы по программированию - отключение анимации при наведении курсора мыши

отключение анимации при наведении курсора мыши

#jquery

#jquery

Вопрос:

Ниже у меня есть некоторый код, который в основном анимирует div от нижней части страницы до верхней. Когда я наведу курсор на div, я хочу, чтобы анимация немедленно остановилась и присвоила div значение непрозрачности 0.25. Когда мышь покидает div, я хочу, чтобы анимация продолжалась.

Прямо сейчас анимация не останавливается, и значение непрозрачности задается после завершения анимации, а не сразу, чего я и хочу.

Итак, как мне получить желаемый результат?

 <!DOCTYPE html>
<html>
<head>
<style> 
#bubble{ 
border-radius:20px;
margin:3px; 
width:40px; 
height:40px;
position:absolute;
left:0px; 
top:1000px;
background:green; 
display:none; 
}
</style>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="bubble"></div>
<script>
function runIt() {
$('#bubble').show(0);
$('#bubble').animate({top:'-=1000px',},5000);
$('#bubble').animate({top:' =1000px',},0);
$('#bubble').hide("normal", runIt);
}

runIt();

$('#bubble').hover(function() {
  $('#bubble').animate({
    opacity: 0.25,
  }, 500, function() {});
});
</script>
</body>
</html>

Ответ №1:

Существует плагин jQuery pause / resume, который делает именно то, что вы ищете.

Посмотрите на эту скрипку в качестве примера

Ответ №2:

Вы ищете .stop() . Вы могли бы использовать это, чтобы остановить любую анимацию, запущенную на выбранном элементе (и, при необходимости, мгновенно перейти к логическому завершению анимации) на mouseover и перезапустить анимацию на mouseout компонентах hover() .

 $('#bubble').animate({ 
    // blah
}).hover(function() {
    // stop animation
    $(this).stop().css({ opacity : 0.25 });
}, function () {
    // continue animation
    $(this).css({ opacity : 1.0 }).animate({ /* blah */ });
});

Однако, глядя на ваш код, вы используете инкрементную анимацию (т. Е. Используете =1000px вместо чего-то фиксированного типа 1000px ). Из-за этого вам придется каким-то образом отслеживать ход анимации и применять к ней скорректированную инкрементальность mouseout .

Например, если #bubble выполняется анимация, а затем вы наводите на нее курсор, вы должны быть в состоянии определить, что она уже перемещена, 300px например, и вызвать скорректированный .animate({ top : '-=700px' }) параметр при продолжении.

Если вы использовали фиксированные значения для анимации, не должно быть проблемой просто вызвать исходную анимацию снова при продолжении.

Ответ №3:

В случае наведения вы захотите вызвать .stop(true, false). Затем в функции exit (в настоящее время пустой) вам нужно перезапустить анимацию с текущей позиции.

 <script>
function runIt() {
$('#bubble').show(0);
$('#bubble').animate({top:'-=1000px'},5000);
$('#bubble').animate({top:' =1000px'},0);
$('#bubble').hide("normal", runIt);
}

runIt();

$('#bubble').hover(function() {
  $(this).stop(true, false);
  $(this).animate({
    opacity: 0.25,
  }, 500);
}, function() {
  runIt();
  });
</script>