Jquery animate()의 느린 응답 문제 해결

상위로 돌아가는 버튼은 페이지를 클릭하면 자동으로 웹페이지 상단으로 돌아가는 데 필수적입니다. 하이퍼링크를 사용할 수는 있지만 즉시 상위로 돌아가는 효과는 이상적이지 않습니다. 더 나은 효과는 위쪽 스크롤이 약 0.5초 동안 지속되기 때문에 애니메이션 효과를 사용해야 한다는 것입니다.

jquery의 animate() 메소드를 사용하기로 했는데, 상위로 복귀하는 효과는 완벽하게 구현됐지만, 다른 효과는 이상적이지 않았습니다.

뒤로가기 버튼의 높이가 화면 높이보다 작으면 사라지고 높이보다 크면 나타나기를 바라는데 CSS 속성 '불투명도'를 사용하여 조절하는데 매번 당길 때마다 나타납니다. 상단까지 올려도 버튼이 사라지지 않고 마침내 사라졌다가 하단으로 당겨졌으나 버튼이 다시 나타나지 않았습니다. 코드는 다음과 같으며 CSS 코드는 표시되지 않습니다.

<!--index.html-->
    <p class="sideBar">
        <p class="goToTop"></p>
    </p>

//回到顶部
    $(".goToTop").on("click",function(){
        $("html,body").animate({scrollTop:0},'slow');
    });// 控制按钮是否消失
    $(function(){
        var windowHeight = window.innerHeight;        var $goToTop;
        $(window).scroll(function(){
            $goToTop = $(".goToTop");           if(windowHeight < $goToTop.offset().top){
            $goToTop.animate({opacity : 1},200);
        }else{
            $goToTop.animate({opacity : 0},200);
            }
        });
    });

항상 존재합니다. 3~4번 코드를 확인해 보니 문제가 없었으나 결과는 오류였습니다. 나중에는 진짜가 되어 구글링을 하다가 바로 답을 찾았습니다

• Stack Overflow: Jquery 반응 시간이 느립니다

글쎄요.. 스크롤하는 동안 매 순간 발생하는 스크롤 리스너를 호출하고 있지만 스크롤 리스너를 호출할 때 스크롤 속도가 상대적으로 느린 애니메이션도 재생합니다. 스크롤하면 동시에 재생을 시도하는 여러 nimations 호출을 생성합니다(이것이 UI 속도를 저하시키는 이유입니다).

즉, 마우스 스크롤 한 번으로 animate() 메서드 실행이 트리거되고 각 실행에 시간이 걸립니다. 내 코드의 경우 한 번의 실행은 길지 않지만 여러 번 중첩되어 실행이 지연됩니다.

• Solution

.stop()을 호출하기 전에 .animate

다음은 animate() 메소드를 수정하는 방법입니다:

    //在animate()方法之前添加stop()函数
    $goToTop.stop().animate({opacity : 1},200);

문제가 해결되었습니다! ! !

페이지를 클릭하면 자동으로 웹페이지의 상단으로 돌아가는 버튼이 없으면 웹페이지는 하이퍼링크를 사용할 수 있지만 즉시 상단으로 돌아가는 효과는 이상적이지 않습니다. .더 좋은 효과는 위로 올라가는 것입니다. 스크롤은 약 0.5초 동안 지속되며, 이는 애니메이션 효과를 사용해야 합니다.

jquery의 animate() 메소드를 사용하기로 선택했는데, 상위로 복귀하는 효과는 완벽하게 구현됐지만, 다른 효과는 이상적이지 않았습니다.

뒤로가기 버튼의 높이가 화면 높이보다 작으면 사라지고 높이보다 크면 나타나기를 바라는데 CSS 속성 '불투명도'를 사용하여 조절하는데 매번 당길 때마다 나타납니다. 상단까지 올려도 버튼이 사라지지 않고 마침내 사라졌다가 하단으로 당겨졌으나 버튼이 다시 나타나지 않았습니다. 코드는 다음과 같으며 CSS 코드는 표시되지 않습니다.

<!--index.html-->
    <p class="sideBar">
        <p class="goToTop"></p>
    </p>

//回到顶部
    $(".goToTop").on("click",function(){
        $("html,body").animate({scrollTop:0},'slow');
    });// 控制按钮是否消失
    $(function(){
        var windowHeight = window.innerHeight;        var $goToTop;
        $(window).scroll(function(){
            $goToTop = $(".goToTop");           if(windowHeight < $goToTop.offset().top){
            $goToTop.animate({opacity : 1},200);
        }else{
            $goToTop.animate({opacity : 0},200);
            }
        });
    });

항상 존재합니다. 문제가 있었습니다. 코드를 서너 번 확인했는데 문제가 없었는데 결과는 오류였습니다. 나중에는 진짜가 되어 구글링을 해볼 수밖에 없었고 바로 답을 찾았습니다.

• StackOverflow: Jquery 느림 반응 시간

글쎄요.. 스크롤하는 동안 매 순간 발생하는 스크롤 리스너를 호출하지만 스크롤하여 스크롤 리스너를 호출하면 상대적으로 스크롤 속도가 느린 애니메이션도 재생합니다. 한 번에 모두 재생하려고 하는 nimations 호출(이것이 UI 속도를 저하시키는 이유입니다).

즉, 마우스 스크롤 animate() 메서드의 실행은 한 번 트리거되고 각 실행에는 시간이 걸립니다. , 한 번에 0.2초 동안 실행되지만 여러 번 중첩되어 animate( ) 메서드의 실행이 다르게 됩니다. .animate

• 를 호출하기 전에 .stop() animate() 메서드를 수정하는 방법은 다음과 같습니다.

      //在animate()方法之前添加stop()函数
      $goToTop.stop().animate({opacity : 1},200);

  문제가 해결되었습니다! ! !

  위 내용은 Jquery animate()의 느린 응답 문제 해결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!