すべてのアニメーションを元の状態に戻してから、次の手順に進みますか？

Question

フォームから入力を受け取り、PHPを使用してMySQLデータベースに格納し、別のページですべてをエコーするシステムがありますが、作成しようとしているナビゲーションの種類は1情報タブでは、わずかに低い不透明度と、jQueryのアニメートと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のリンクをクリックしたときにそう取得しようとしていますアニメーションは起こりますが、別の.notititleをクリックすると現在選択されているアニメーションが元の状態に戻ります。クラスに基づいているため、新たにクリックされたdivがアニメーション化されます。問題は少し大きくなります。特定のdivは疑問から外れています。これは$（this）要素を使用する必要があることを意味します。これは混乱を招くことです。

jQuery私はこれまでのところ..！

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

Answer 1

あなたは元の不透明度に他のすべてのオブジェクトを入れて、この1つだけをアニメーション化することができます

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

それとも、あなたがリセットできるので、あなたがそれにクラスを追加することにより、アニメーションの最後の1のトラックを保つことができますそれは後で不透明です：

$('.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など）を追加することをお勧めします。別の要素をクリックすると、このクラスの要素があるかどうかを確認します。存在する場合は、アニメーションを停止/元に戻します。その後、これらの要素からこのクラスを削除し、現在のクラスに追加します。