重置動畫後的div

Question

我有一個問題，試圖將包含圖像的div重置爲原始值，然後對其進行動畫處理。

所以我有一個測試與6張圖片相鄰放置。 用戶必須選擇6張照片中的一張。當點擊該圖片時，我會將圖片變成全屏。之後，當用戶雙擊圖片時，圖片應該回到原來的位置以用於下一個問題。

但是，返回不起作用，我不明白爲什麼。

當心：在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