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

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

只需用它来重置它。

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

Answer 2

完成动画后，只需删除样式属性。

与上述解决方案一样：

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

Jquery重置动画

2 个答案: