jquery - jQuery重置动画

Question

我正在制作具有几种不同效果的幻灯片。这种特殊的效果会缩小图像并淡出。但问题是，我需要将图像重置为其原始状态，因此当用户单击返回该图像时，它仍然具有“0.2”的不透明度。无论如何，我可以在动画完成后重置动画吗？

if (currentEffect == "glimpse") {
 $("#next").click(function() {
   if (currentSlide == 0) {
    $("#slide1").animate({
     width: "0",
     opacity: 0.2,
     borderWidth: "10px"
    }, 1000 );
    $("#slide2").fadeIn(800);
   }
 });
}

Answer 1

只需在动画完成后删除样式属性即可。

像上面的解决方案：

$("#slide1").animate({
 width: "0",
 opacity: 0.2,
 borderWidth: "10px"
}, 1000, function(){ 
  $('#slide1').removeAttr('style');
});

Answer 2

.animate()完成时有一个回调：http: //api.jquery.com/animate/

只需使用它来重置它。

$("#slide1").animate({
     width: "0",
     opacity: 0.2,
     borderWidth: "10px"
    }, 1000, function(){ 
      //reset the image's opacity, width, etc.
    });