jquery动画回调问题

Question

我试图在此动画上使用回调，以便在动画完成后正在进行动画处理的图像会回到其原始状态。但它没有正常工作。有人能告诉我如何用正确的语法来做到这一点吗？

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

Answer 1

if (currentEffect == "glimpse") { 
    $("#next").click(function() { 
     if (currentSlide == 0) { 
      $("#slide1").animate({ 
       width: "0", 
       opacity: 0.2, 
       borderWidth: "10px" 
      }, 1000, function() { 
       $(this).animate({ // <-- need to call .animate() again 
        width: "700px" // <--- you forgot a , 
        opacity: 100, // <--- opacity is a value between 0.0 and 1.0 
        borderWidth: "0px" 
       }, 1000); 
      }); 
      $("#slide2").fadeIn(800); 
     } 
    }); 
} 

Answer 2

回调功能不被引用的对象。您可能想要：

$("#slide1").animate({ 
    width: "0", 
    opacity: 0.2, 
    borderWidth: "10px" 
}, 1000, function() { 
    $("#slide1").css({ 
     width: "700px", 
     opacity: 1, 
     borderWidth: "0px" 
    }); 
});