重置動畫後的div

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

謝謝你的幫助。

來源

2017-04-03 Cainnech

不會基於類變化的CSS動畫/過渡更好嗎？ –

你可以從一個css類動畫到另一個嗎？ – Cainnech

隨着轉換 - 確定你可以。我會準備小提琴。 –

請嘗試更改事件處理程序如下：

$(".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

來源

2017-04-03 09:52:19 itacode

謝謝itacode，但是當我嘗試這樣做時，它會重置我的z-index，但圖片保持全屏並且不會調整爲250px X 300px – Cainnech

重置動畫後的div

回答

相關問題