アニメーション後にdivをリセットする

Question

イメージを含むdivをアニメーション化した後に元の値にリセットしようとすると問題が発生します。

私は互いに隣り合って配置された6枚の写真で一種のクイズを持っています。 ユーザーは6枚の写真から1枚を選択する必要があります。その画像をクリックすると、画像が全画面に表示されます。その後、ユーザーが画像をダブルクリックすると、画像は次の質問の元の位置に戻るはずです。

しかし、リターンは機能していません。理由はわかりません。

注意してください：私はこれらを保持する必要がありますので、divsareは、特定の左位置にdivを浮かべ...

これはアニメーションコードです：

：

$(".candidatePicture").click(function(e){ 
     $(e.target).css('z-index', 1); 
     $(e.target).animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000); 
    }); 

これは、リターンコードです

$(".candidatePicture").css({ 'width': '250px', 'height': '300px', 'z-index': '0' }); 

あなたはここにコードを見つけることができます：http://jsbin.com/gotuqenoce

助けていただきありがとうございます。

Answer 1

次のようにイベントハンドラを変更してみてください。

$(".candidatePicture").click(function(e){ 
    var $this = $(this); 
    $this.css('z-index', 1); 
    $this.animate({top: '0', left: '0', width: '1920px', height: '1080px'}, 1000); 
    $this.off("click"); 
}); 
$(".candidatePicture").dblclick(function(e) { 
    $(this).css({ top: '', left: '', 'width': '', 'height': '', 'z-index': '' }); 
    showNextQuestion(); 
}); 

http://jsbin.com/latiqemozo/edit?html,output