как анимировать после мыши в jquery - PullRequest
Новая
       9

как анимировать после мыши в jquery

9 голосов
/ 31 января 2011

ОК, это отлично работает для слежения за моей мышью. 

//
$(document).mousemove(function(e){
  $("#follower").css({
      'top': e.pageY + 'px';
      'left': e.pageX + 'px';
  });
});
//

И это прекрасно работает для анимации мыши в точке щелчка 

//
$(document).click(function(e){
  $("#follower").animate({
      top: e.pageY + 'px';
      left: e.pageX + 'px';
  }, 800);
});
//

Но я лично чувствую, что логически это ДОЛЖНО работать! Исходя из моей точки зрения, как сценарист. И тогда мой вопрос, как я могу сделать эту работу. Я хочу, чтобы #follower пытался следовать за моей мышью с динамичным видом отставания. 

//
$(document).mousemove(function(e){
  $("#follower").animate({
      top: e.pageY + 'px';
      left: e.pageX + 'px';
  }, 800);
});
//

1 Ответ

33 голосов
/ 31 января 2011

Как насчет использования setInterval и уравнения, называемого парадоксом Зенона:

http://jsfiddle.net/88526/1/

Так я обычно делаю.

По запросу я включилкод в этом ответе.Дано div с абсолютным позиционированием:

CSS: 

#follower{
  position : absolute;
  background-color : red;
  color : white;
  padding : 10px;
}

HTML: 

<div id="follower">Move your mouse</div>

JS с jQuery: 

var mouseX = 0, mouseY = 0;
$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping, higher is slower
    xp += (mouseX - xp) / 12;
    yp += (mouseY - yp) / 12;
    follower.css({left:xp, top:yp});

}, 30);
...