jQuery에서 애니메이션 애니메이션의 두 번째 클릭 이벤트가 응답하지 않습니다_jquery

animate를 사용하여 페이지 넘김 애니메이션을 수행할 때 두 번째 클릭 이벤트 애니메이션이 응답하지 않지만 첫 번째 클릭에는 애니메이션 효과가 있는 것을 발견했습니다.

코드 복사 코드는 다음과 같습니다.

$(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo');

두 번째 클릭 이벤트의 애니메이션이 응답하지 않는 이유: top은 페이지 요소의 상단과 해당 상위 요소의 상단 사이의 거리입니다. 첫 번째 클릭 후 페이지 요소의 상단이 다음 위치로 이동했습니다. 상위 요소 상단에서 -300px 위치입니다. 두 번 클릭하면 페이지가 이동된 위치에서 계속 -300px 이동하는 것이 아니라 현재 위치가 상위 요소 상단에서 -300px입니다. 분명히 처음에는 top:-300px 위치로 이동했고, 두 번째에는 top:-300px 이동 거리가 0이므로 응답이 없습니다.
해결책:

코드 복사 코드는 다음과 같습니다.

$(".page").stop().animate({top:“-=300px”}, 800, 'easeInOutExpo');

top: "-=300px", 두 번째 클릭이 첫 번째 클릭 이후 해당 위치로 계속 -300px 이동합니다.

애니메이션으로 이동한 거리가 변수인 경우 "-= 변수명"으로 쓸 수 없습니다.

 
function down() {
var page_h=$(".page").height(); //687
var page_top=parseInt($(".page").css("top")); //0
var move=wrap_top+page_h;
$(".page").stop().animate({top:move}, 800, 'easeInOutExpo');
};

var page_h=$(".page").height(); 페이지 높이를 가져와서 page_h에 할당합니다.
var page_top=parseInt($(".page").css("top")); 현재 페이지 상단에서 상위 요소 상단까지의 거리를 가져와서 page_top에 할당합니다. (parseInt: 제거 "PX ");
var move=wrap_top page_h; 이동 거리 계산

이런 방식으로 각 애니메이션은 "현재 페이지 상단에서 상위 요소 상단까지의 거리"를 다시 얻습니다.

참고: $(".page").height() 값에는 px 단위가 없고, $(".page").css("top")) 값에는 px 단위가 없으며, parseInt가 필요합니다. 계산하려면 단위 px 픽셀 단위를 삭제해야 합니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.