在繼續下一步之前，將所有動畫還原爲原始狀態？

Question

我已經有了一個系統，可以從表單中獲取輸入，並將其放入MySQL數據庫，並在另一個頁面上再次顯示所有內容，儘管我試圖創建的導航類型是當您單擊1信息選項卡，它動畫並顯示稍微較低的不透明度，以及不同的背景顏色，我可以使用jQuery的animate和與backgroundColor一起使用的動畫插件。但我的問題是，我有幾個這樣的輸出，如下圖2：

<div id="left"> 
<div id="left-top"> 
<div id="left-top-inner"></div> 
</div> 
<div id="notes-parent-title">Your Notes</div> 
<div id="notes-container"><a href="note?id=1" target="mainframe" class="nlink"><div class="notetitle"><hr> 
<table class="left-note-title"> 
<tr> 
<td>Just giving Notr a little test run...</td> 
<td>&raquo;</td> 
</tr> 
<tr> 
<td><a id="1" class="delete">Delete</a></td> 
<td></td> 
</tr> 
</table><hr></div></a><a href="note?id=2" target="mainframe" class="nlink"><div class="notetitle"><hr> 
<table class="left-note-title"> 
<tr> 
<td>My Notr is really awesome its...</td> 
<td>&raquo;</td> 
</tr> 
<tr> 
<td><a id="2" class="delete">Delete</a></td> 
<td></td> 
</tr> 
</table><hr></div></a></div> 
</div> 

基本上，我試圖讓所以當你點擊鏈接.notetitle，是一個完整的表，動畫就會發生，但是當你點擊另一個.notetitle時，當前選定的動畫會恢復到原來的狀態，而新點擊的div動畫，這個問題有點大，因爲它是基於類的，PHP輸出可能是無限的，所以具體的div是不可能的，這意味着不得不使用$（this）元素，這有點令人困惑！

jQuery我到目前爲止..！

$('.notetitle').click(function(){$(this).animate({ 
    opacity: 0.7, // + Background color animation on \n 
}, 200, function() {});});</script> 

任何想法？

Answer 1

你可以把所有其他對象回原來的不透明度和動畫僅這一個：

$('.notetitle').click(function(){ 
    $('.notetitle').not(this).stop(true).css("opacity", "1"); 
    $(this).animate({ 
     opacity: 0.7, // + Background color animation on 
    }, 200); 
}); 

或者，你可以跟蹤，通過添加一個類，所以你可以重新動畫的最後一它後來不透明：

$('.notetitle').click(function(){ 
    $('.lastNoteAnimated').stop(true).animate({opacity: 1}, 200).removeClass('.lastNoteAnimated'); 
    $(this).addClass('.lastNoteAnimated').animate({ 
     opacity: 0.7, // + Background color animation on 
    }, 200); 
}); 

Answer 2

您可以在jQuery中使用stop current animation。

或者您可以自己恢復原始值。

要做到這一點，你必須能夠選擇當前動畫的元素。爲了促進這一點，我建議在你的點擊處理程序中添加一個特殊類（如currentlyAnimated）。當你點擊另一個元素時，檢查這個類是否有元素。如果有，停止/恢復他們的動畫。之後，你從這些元素中移除這個類並將其添加到當前元素中。