jquery - 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"
    });
});