动画后重置div

时间:2017-04-03 09:16:44

标签: javascript jquery css jquery-animate

我在尝试将包含图片的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

感谢您的帮助。

1 个答案:

答案 0 :(得分: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();
});

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