jQuery通過特定div生成動畫

是否可以使用特定路徑將對象從一個位置變爲另一個位置？例如，在從pos1到pos2的動畫製作中，如果在方法中存在帶「no-ok」類的div，則不應該去那裏，而應在其左側，右側，上方或下方找到最近的稱爲OK的div。如果沒有叫好的div，它應該停止。以下圖片說明：jQuery通過特定div生成動畫

enter image description here

到目前爲止，我只能從POS1動畫到POS2，但我不知道如何檢查是否有DIV沒有確定的方式，以及如何找到與類一樣的最近的div。

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 
    }); 
});

來源

2012-08-09 user1355300

動畫內在張力結構必須是這樣的：

Here is jsFiddle to play with.

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 
     }); 
    }); 
});

來源

2012-08-09 10:19:20

感謝您的答案，但我的意思是可以有任何隨機div類，所以它應該看看它是否有可能移動（例如。移動到只有類與'確定'） – user1355300 2012-08-09 10:59:00

我無法理解你的評論的問題，我只是做了我在你的排隊圖片上看到的。解釋更多spesific或選擇accpet答案，如果它工作隊友。 – 2012-08-09 11:06:21

jQuery通過特定div生成動畫

回答

相關問題