火動畫

Question

上面的照片指出我的方案。當用戶點擊一個按鈕，我移動div從位置「A」 [100100]至位置「C」 [100500]使用jQuery Animate()功能，在此期間，搬遷，則div應具有交叉位置「B」 [100250] 。那時候，當它穿過地點B時，我需要發射另一個動畫。

與此相關的問題，我衝浪了很多，發現this link.But它不具備一個公認的答案。另外，Jquery有一個叫Change的事件，但不幸的是它僅與form elements兼容。我的問題是，如果真的不存在，我們可以在jquery中手動處理類似postionChanged或offsetChanged的事件。還是有任何可行的方法來實現我的需要？

謝謝..！

Answer 1

jQuery.animate需要支持以下方法（源）的選項參數[http://api.jquery.com/animate/]

步驟類型：Function（編號現在，PlainObject FX）甲函數在動畫的每個步驟後調用 。

在你的情況下，代碼會看起來像：

$('div').animate({ 
    left: 500 
}, { 
    step: function(now, fx){ 
    if (parseInt(now, 10) === 250){ 
     // call your animation method here. 
    } 
    } 
}) 

Answer 2

您需要通過每個步驟測試動畫並運行一個函數來測試位置。這是來自API文檔，可以很容易地用於動畫。

$('li').animate({ 
    opacity: .5, 
    height: '50%' 
}, 
{ 
    step: function(now, fx) { 
    var data = fx.elem.id + ' ' + fx.prop + ': ' + now; 
    $('body').append('<div>' + data + '</div>'); 
    } 
}); 

我爲它做了一個小提琴。 http://jsfiddle.net/MatthewDavis/6g8aP/1/

Answer 3

這裏是一個有效的解決方案： 我還使用了一步事件

HTML

<div id="#wrapper"> 
    <div class="left"></div> 
    <div class="right"></div> 
    <div class="dot"></div> 
</div> 
<button class="go">GO!</button> 

CSS

#wrapper { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.left, .right { 
    position: absolute; 
    top: 25px; 

    width: 100px; 
    height: 100px; 
} 
.left { 
    z-index: 1; 
    left: 25px; 
    background-color: red; 
} 
.right { 
    right: 25px; 
    background-color: green; 
} 

.dot { 
    position: absolute; 
    top: 72.5px; 

    width: 5px; 
    height: 5px; 
    left: 50%; 
    margin-left: 2.5px; 

    background-color: blue; 
} 

button.go { 
    display: block; 
    position: absolute; 
    top: 150px; 
    left: 25px; 
} 

的jQuery

var $left = jQuery('.left'); 
var $right = jQuery('.right'); 
var $button = jQuery('button.go'); 
var $dot = jQuery('.dot'); 

var rightPos = $right.offset().left; 
var dotPos = $dot.offset().left; 
var thread = undefined; 
var animationStarted = false; 

$button.click(function() { 
    $left.animate({ 
    'left': rightPos 
    }, { 
    duration: 1000, 
    specialEasing: { 
     'left': 'easeOutQuad' 
    }, 
    step: function(now, fx) { 
     if (!animationStarted && now +$left.width() > dotPos) { 
     if (thread) { clearTimeout(thread); } 
     thread = setTimeout(function() { 
      animation(); 
      animationStarted = true; 
     }, 0); 
     } 
    }, 
    complete: function() { 
     $(this).after('<div>Animation complete.</div>'); 
    } 
    }); 
}); 

function animation() { 
    $right.animate({ 
    'background-color': '#0000ff' 
    }, { 
    specialEasing: { 
     'background-color': 'easeOutQuad' 
    } 
    }); 
}; 

注意，我使用的setTimeout階梯函數內部來調用所述第二動畫在其它上下文。我不確定是否可以在一個正在運行的動畫中運行.animate（）調用。爲了保持順暢，我認爲最好這樣做。有誰知道它確切嗎？

另一點是可變animationStarted。它只是記得我們是否稱第二個動畫。另一件事是確保不要在其他動畫的步驟事件中調用複雜的動畫。用這種方式，我們一定會這麼稱呼它。

DEMO