약속이있는 jQuery 애니메이션 콜백이 너무 일찍 발생합니다.

Question

내 메뉴의 로고를 클릭하면 내 홈페이지가 다시 스크롤됩니다. 또한 음수 여백과 함께 화면 밖으로 개체를 움직이는 $(window).scroll()에 청취자가 있습니다.

제 문제는이 이벤트는 애니메이션 (애니메이션 scrollTop)으로 시작된다는 것입니다.

이렇게하려면 부울 변수가 있어야합니다. .promise()과 .done()의 조합을 사용하는 스크롤 애니메이션 후에 만 ​​설정해야합니다.

이 내 자바 스크립트입니다 :

var firstscroll=true; 

$(function(){ 


    var captionWidth= $(".caption").children().size() * 35; 
    $(".caption").width(captionWidth); 

    $(window).scroll(function() { 
     if(firstscroll){ 
     $(".hidden-menu").removeClass("hidden-menu", {duration:500}); 
     $('.header').animate({ 
      marginTop: $('.header').height() * -1 
     }, 500); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     firstscroll = false; 
     } 
    }); 

    $(".menu-logo, .logo-container").click(function(){ 
     $('.header').animate({ 
      marginTop: 0 
     }, 500); 
     $('html, body').animate({ 
      scrollTop: 0 
      }, 500).promise().done(resetFirstScroll()); 
    }); 
}); 

var resetFirstScroll = function() { 
    firstscroll=true; 
} 

해결책은 함수에게 setTimeout 50 밀리 초를 제공하는 것입니다 만, 애니메이션이 완료되면 차라리 제대로 할 것입니다. .은 "해키"솔루션 싶은 분들을 위해

$(".menu-logo, .logo-container").click(function(){ 
     $('.header').animate({ 
      marginTop: 0 
     }, 500); 
     $('html, body').animate({ 
      scrollTop: 0 
      }, 500, function() { 
       resetFirstScroll(); 
      }); 
    }); 
}); 

var resetFirstScroll = function() { 
    firstscroll=true; 
} 

Answer 1

: 표준 콜백을 ​​사용하여

는

같은 출력을 제공

var firstscroll=true; 

$(function(){ 


    var captionWidth= $(".caption").children().size() * 35; 
    $(".caption").width(captionWidth); 

    $(window).scroll(function() { 
     if(firstscroll){ 
     $(".hidden-menu").removeClass("hidden-menu", {duration:500}); 
     $('.header').animate({ 
      marginTop: $('.header').height() * -1 
     }, 500); 
     $('html, body').animate({ 
      scrollTop: 0 
     }, 500); 
     firstscroll = false; 
     } 
    }); 

    $(".menu-logo, .logo-container").click(function(){ 
     $('.header').animate({ 
      marginTop: 0 
     }, 500); 
     $('html, body').animate({ 
      scrollTop: 0 
      }, 500, function() { 
      setTimeout(resetFirstScroll, 50); 
      }); 
    }); 
}); 

var resetFirstScroll = function() { 
    firstscroll=true; 
}