스크롤에서 한 번만 jQuery 애니메이션을 실행하려면 어떻게해야합니까?

debugcn 에 게시 Dev

Monstr92

사용자가 내 사이트의 특정 높이를지나 아래로 스크롤하면 내 "소셜"아이콘이 해당 스크롤 중단 점에 도달하면 페이드 인하는 것을 감지하기 위해 Javascript를 사용하려고합니다.

내가 알아 내려는 것은 알파가 1에 도달하고 잠긴 후에 만 fadeTo를 실행하는 방법입니다. 따라서 사용자가 위아래로 다시 스크롤 할 때 모든 것을 재설정하는 페이지 새로 고침을 시작하지 않는 한 fadeIn이 반복해서 발생하지 않습니다.

//SCROLL
$(window).on("scroll", function () {
//SOCIAL ICONS
if ($(this).scrollTop() > 1750) {
    $(".img-social .gith").stop(true).fadeTo(250, 1);
    $(".img-social .inst").stop(true).fadeTo(450, 1);
    $(".img-social .twit").stop(true).fadeTo(650, 1);
    $(".img-social .drib").stop(true).fadeTo(850, 1);
    $(".img-social .link").stop(true).fadeTo(1050, 1);
} else {
    $(".img-social .gith").stop(true).fadeTo(10, 0);
    $(".img-social .inst").stop(true).fadeTo(10, 0);
    $(".img-social .twit").stop(true).fadeTo(10, 0);
    $(".img-social .drib").stop(true).fadeTo(10, 0);
    $(".img-social .link").stop(true).fadeTo(10, 0);
}
});

감사

알파

코드 를 실행 한 후 이벤트에 대한 첫 번째 if조건 내에 다음 코드를 넣으십시오 .offscroll

$(window).on("scroll.socialIcon", function () {
    if ( $(this).scrollTop() > 1750 ) {
        // ...
        $(window).off("scroll.socialIcon"); // last line
    } else {
        //...
    }
});

따라서 scroll.socialIcon(네임 스페이스) 이벤트는 더 이상 응답하지 않습니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-31

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

스크롤에서 한 번만 jQuery 애니메이션을 실행하려면 어떻게해야합니까?

스크롤에서 한 번만 jQuery 애니메이션을 실행하려면 어떻게해야합니까?

단일 div를 가리키면 한 번에 두 개의 CSS 애니메이션을 실행하려면 어떻게해야합니까?

Android에서 메소드를 한 번만 실행하려면 어떻게해야합니까?

React-이벤트 리스너를 한 번만 실행하려면 어떻게해야합니까?

아래로 스크롤하면서 애니메이션을 한 번 실행

setInterval을 한 번만 실행하려면 어떻게해야합니까?

한 번에 여러 레이크 작업을 실행하려면 어떻게해야합니까?

첫 번째 애니메이션 후에 두 번째 애니메이션을 실행하려면 어떻게해야합니까?

.net Core 3.0에서 작업자 서비스를 한 번 실행하려면 어떻게해야합니까?

내 비즈니스 로직을 한 번만 실행하여 객체를 한 번만 변경하려면 어떻게해야합니까?

div에서 한 번 스크롤 할 때 숫자에 JQuery 애니메이션 실행

1 분에 한 번씩 while 루프를 실행하려면 어떻게해야합니까?

React 커스텀 후크에서 한 번만 데이터를 가져 오려면 어떻게해야합니까?

한 번만 확대하려면 어떻게해야합니까?

jQuery 함수 : html 외부에서 애니메이션을 호출하려면 어떻게해야합니까?

PHP는 창 위로 마우스를 이동할 때 자바 스크립트를 실행합니다. 함수에서 반복됩니다. 한 번만 실행하려면 어떻게해야합니까?

OnClick 이벤트가 한 번만 실행되도록하려면 어떻게해야합니까?

내 애니메이션을 이상한 요소가 아닌 각 요소를 '펄스'로 만들려면 어떻게해야합니까?

내 스크립트는 한 번 실행됩니다. 항상 실행되도록 코딩하려면 어떻게해야합니까?

pygame, 게임의 점수를 루프 내에서 한 번만 추가하려면 어떻게해야합니까?

한 번에 여러 항목을 애니메이션하려면 어떻게합니까?

macOS Sierra에서 실행 가능한 Python 파일을 만들려면 어떻게해야합니까?

jquery 배열을 반복 한 다음 각 항목 (인덱스 0에서 시작)을 한 번에 하나씩 출력하려면 어떻게해야합니까?

Linux / bash에서 두 개의 진행중인 프로세스를 한 번에 실행하려면 어떻게해야합니까?

Mac 터미널에서 한 폴더의 여러 파일에 대해 한 번에 명령을 실행하려면 어떻게해야합니까?

내 갤러리에서 한 번에 표시 할 행 수를 제한하려면 어떻게해야합니까?

AWS SSH 세션에서 업로드 한 애플리케이션의 일부인 Python 스크립트를 실행하려면 어떻게해야합니까?

템플릿에 값을 한 번만 할당하려면 어떻게해야합니까?

한 번에 하나의 배열 요소에만 상태를 설정하려면 어떻게해야합니까?

모든 메소드에 대해 객체를 한 번 만들려면 어떻게해야합니까?