重置动画后的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

回答

相关问题