是否可以使用特定路径使对象从一个位置动画到另一个位置? 例如,在从pos1到pos2的动画中,如果在路上有一个类“no-ok”的div,它不应该去那里而是在其左,右,上或下找到最近的div,称为OK。如果没有名为ok的div,它应该停止。 下图说明了:
到目前为止,我只能从pos1动画到pos2,但我不知道如何检查是否存在div no-ok,以及如何使用class ok找到最近的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
});
});
答案 0 :(得分:1)
动画结构必须如下:
<强> 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
});
});
});