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