Javascript 动画后重置div
在设置动画后,尝试将包含图像的div重置为原始值时遇到问题 所以我有一个小测验,有6张图片放在一起。 用户必须从6张图片中选择一张。当点击那张图片时,我会让图片全屏显示。之后,当用户双击图片时,图片应返回到原始位置,以便进行下一个问题 然而,回报不起作用,我不明白为什么 注意:div是浮动div,有特定的左位置,所以我需要保留这些 这是动画代码:Javascript 动画后重置div,javascript,jquery,css,jquery-animate,Javascript,Jquery,Css,Jquery Animate,在设置动画后,尝试将包含图像的div重置为原始值时遇到问题 所以我有一个小测验,有6张图片放在一起。 用户必须从6张图片中选择一张。当点击那张图片时,我会让图片全屏显示。之后,当用户双击图片时,图片应返回到原始位置,以便进行下一个问题 然而,回报不起作用,我不明白为什么 注意:div是浮动div,有特定的左位置,所以我需要保留这些 这是动画代码: $(".candidatePicture").click(function(e){ $(e.target).css('z-index',
$(".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' });
您可以在此处找到代码:
感谢您的帮助。请尝试按如下方式更改事件处理程序:
$(".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();
});
请尝试更改事件处理程序,如下所示:
$(".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();
});
基于类更改的css动画/转换不是更好吗?你能从一个css类到另一个css类进行动画制作吗?当然可以。我将准备fiddle.see()基于类更改的css动画/转换不是更好吗?您可以从一个css类到另一个css类进行动画制作吗?使用转换-当然可以。我会准备fiddle.see()谢谢itacode,但是当我尝试这个时,它会重置我的z索引,但是图片保持全屏,并且没有调整到250px X 300px谢谢itacode,但是当我尝试这个时,它会重置我的z索引,但是图片保持全屏,并且没有调整到250px X 300px