4

jquery animateを使用して、マウスムーブの背景をアニメーション化しようとしています。しかし、アニメーションのキューイングを停止し、アニメーションをマウスに「追従」させる方法がわかりません

HTML:

Animate Background<br />
<div id="animateme"></div>​

JS:

$("#animateme").bind('mousemove', function(e) {

    $(this).animate({
        'background-position-x': e.pageX,
        'background-position-y': e.pageY
    }, 100, 'swing');

});​

http://jsfiddle.net/KunZ4/1/を意味することをうまくいけば示すために、私はjsfiddleを設定しました

一番上の画像にカーソルを合わせると、背景のアニメーションがマウスに追従することがわかります。しかし、これにイージングを追加したいので、マウスに少しスムーズに追従します。

jquery アニメーションを使用するとキューのように見えますが、マウスの動きが停止したときに少し遅れてアニメーションがマウスに追いつくようにしたいと考えています。

UI やプラグインを使用せずにこれを実現したいと考えています。

うまくいけば、それは何らかの意味を持ちます

4

3 に答える 3

4

これを探している他の人のために、私のために働いたものを見つけました

http://jsfiddle.net/KunZ4/6/

イージングは​​デュレーションを変更することで調整できます

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
 }; 


$("#animateme").bind('mousemove', function(e){

 $(this).animate({
   'background-position-x': e.pageX,
   'background-position-y': e.pageY
 }, {queue:false,duration:200,easing:'smoothmove'});

 });

助けてくれてありがとう

于 2012-12-27T16:27:28.397 に答える
0

stop(true)関数の前に追加してみてください.animate：

$("#animateme").bind('mousemove', function(e) {

    $(this).stop(true).animate({
        'background-position-x': e.pageX,
        'background-position-y': e.pageY
    }, 100, 'swing');

});​

フィドル: http://jsfiddle.net/maniator/KunZ4/4/

于 2012-12-27T14:36:19.073 に答える
0

開発済み(BODYでマウス移動時): http://jsfiddle.net/hX22a/

$.easing.smoothmove = function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
}; $("body").bind('mousemove', function(e){
$("#animateme").animate({
'background-position-x': e.pageX,
'background-position-y': e.pageY
}, {queue:false,duration:200,easing:'smoothmove'});
});
于 2013-12-20T19:00:55.803 に答える