jquery - 当 if 语句为真时停止 .animate()

Question

我有一个 JQuery 游戏，但我无法让角色div在到达游戏所在的边缘时停止。

有没有一种方法，一旦.animate()开始，它就会在剩余边距达到一定数量时停止？

这是一个小提琴：

http://jsfiddle.net/qUufA/5/

Answer 1

LIVE DEMO

而不是动画，运行一个间隔，检查碰撞并做你的动作。
将所有键存储到一个对象中m（移动）：

var c = $(".character");
var g = $(".game");
var m = {}; // moves
var intv;
var coll = {}; // collisions
var e1, e2;

$(document).on('keydown keyup',function ( e ) {
  var keyDown = e.type == "keydown"; 
  switch (e.which) {
    case 37:
      m.left = keyDown;
      break;
    case 38:
      m.up = keyDown;
      break;
    case 39:
      m.right = keyDown;
      break;
    case 40:
      m.down = keyDown;
      break;
  } 
});

function collisions( el1, el2 ){
  e1 = {
    W : el1.width(),
    H : el1.height()
  };
  e2 = {
    X : el2.position().left,
    Y : el2.position().top,
    W : el2.width(),
    H : el2.height()
  };  
  coll.left   = e2.X <= 0 ;
  coll.up    = e2.Y <= 0 ;  
  coll.right  = e2.X+e2.W >= e1.W ; 
  coll.down = e2.Y+e2.H >= e1.H ;
}

function movePX(){
    collisions( g, c );
    if (m.left ) {
      c.css({left: coll.left ? 0 : "-=2"});
    }
    if (m.up) {
      c.css({top: coll.up ? 0 : "-=2"});
    }
    if (m.right) {
      c.css({ left: coll.right ? e1.W-e2.W : "+=2" });
    }
    if (m.down) {
      c.css({top: coll.down ? e1.H-e2.H : "+=2"});
    }
}

// Engine
intv = setInterval(function() {
   movePX();
   // put other functions here
}, 10);

Answer 2

This is sample workout.

var c = $(".character");
var g = $(".game");
var _anim = false; // global variable 

function get_margin(sel, pos) {
     return parseInt(sel.css('margin-' + pos).replace('px'), 10);
}

// only for left arrow
// I hope u can do the rest

    if (event.keyCode == 37) {
         if ( get_margin(c, 'left') ===  50) {
                _anim.stop();
         } else {
                _anim = $('.character').animate({
                         'margin-left': '-=20px'
                       });
         }
    }

Partially done JSFIDDLE

Answer 3

按照建议，使用 step 回调函数，看看它是否可以帮助你。 step回调函数有两个参数，now和fx。 fx对象具有元素的所有属性，您可以在游戏应用程序中使用它。

出于您的目的，您可以使用fx.elem.offsetLeft属性。

例如

$('li').animate({
  opacity: .5,
  height: '50%'
},
{
  step: function(now, fx) {
    console.log(fx.elem.offsetLeft); //gives you the margin left of current element
  }
});

要了解更多信息，请参阅：http ://api.jquery.com/animate/