jQuery непрерывная анимация на наведении мыши

Question

jQuery непрерывная анимация на наведении мыши

Я пытаюсь иметь анимацию, выполненную только, когда мышь по объекту. Я могу получить одно повторение анимации и затем иметь задержанный к нормальному на мыши. Но я хотел бы, чтобы анимация циклично выполнилась на наведении мыши. Как я сделал бы это, с помощью setInterval? Я немного застреваю.

6

javascript jquery animation mouseover

задан V_H 11 January 2010 в 03:29

3 ответа

setInterval возвращает id, который можно передать в clearInterval, чтобы отключить таймер.

Вы можете записать следующее:

var timerId;

$(something).hover(
    function() {
        timerId = setInterval(function() { ... }, 100);
    },
    function() { clearInterval(timerId); }
);

4

ответ дан 8 December 2019 в 12:59

Рассмотрим:

<div id="anim">This is a test</div>

с:

#anim { padding: 15px; background: yellow; }

и:

var over = false;
$(function() {
  $("#anim").hover(function() {
    over = true;
    grow_anim();
  }, function() {
    over = false;
  });
});

function grow_anim() {
  if (over) {
    $("#anim").animate({paddingLeft: "100px"}, 1000, shrink_anim);
  }
}

function shrink_anim() {
  $("#anim").animate({paddingLeft: "15px"}, 1000, grow_anim);
}

Вы также можете добиться этого использования таймеров.

1

ответ дан 8 December 2019 в 12:59

Другие вопросы по тегам:

javascript jquery animation mouseover

Похожие вопросы:

score 9 · Accepted Answer

Это можно сделать следующим образом:

$.fn.loopingAnimation = function(props, dur, eas)
{
    if (this.data('loop') == true)
    {
       this.animate( props, dur, eas, function() {
           if( $(this).data('loop') == true ) $(this).loopingAnimation(props, dur, eas);
       });
    }

    return this; // Don't break the chain
}

Теперь вы можете сделать так:

$("div.animate").hover(function(){
     $(this).data('loop', true).stop().loopingAnimation({ left: "+10px"}, 300);
}, function(){
     $(this).data('loop', false);
     // Now our animation will stop after fully completing its last cycle
});

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

$(this).data('loop', false).stop();