Проблемы обратного вызова анимации 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" 
    }); 
});