javascript - jQuery Animate 通过特定的 div

Question

是否可以使用特定路径使对象从一个位置动画到另一个位置？例如，在从 pos1 动画到 pos2 时，如果途中有一个类为“no-ok”的 div，它不应该去那里，而是在它的左、右、上或下找到最近的名为 OK 的 div。如果没有 div 调用 ok，它应该停止。下图说明：

到目前为止，我只能从 pos1 动画到 pos2，但我不知道如何检查是否有 div no-ok 的方式，以及如何找到最近的 div 类 ok。

HTML：

  <div class="container">
        <div id="pos1"></div>
        <div class="ok"></div>
        <div class="no-ok"></div>
        <div class="ok"></div>
        <div class="pos2"></div>
    </div>

jQuery：

$('.container').click(function(){
    var pos1 = $('#pos1').position();
    $(this).animate({ 'top': pos1.top + 'px', 'left': pos1.left + 'px'}, 200, function(){
        //end
    });
});

Answer 1

动画结构需要是这样的：

这是 jsFiddle 玩。

var pTop = parseInt($('.container').css('top'));
var pLeft = parseInt($('.container').css('left'));

$('.container').click(function(){
    var $this = $(this);
    $this.stop().animate({'left': (pLeft * 2) + 'px'},1000,function(){
    //firt step = go 2x right
        $this.stop().animate({'top':  (pTop*3)  + 'px'},2000,function() {
        //second step = go 2x bottom
            $('.container').animate({"left": "-=100px"},1000);
            //third step = go begining left position
        });
    });
});​