부트 스트랩 탭으로 스크롤 할 때 div를 애니메이션 처리합니다.

저는 JQuery와 javascript를 사용하는 진정한 초보자이며, 문제 해결을 위해 하루 종일 고생하고 있습니다. 누군가가 도움이되기를 바랍니다. 힘들지 않아야합니다. 뷰포트 높이의 절반이 선언 된 클래스를 통과하여 일부 상자를 표시하려고합니다. 나는 종종하려면이 코드를 사용 그것은 작동 : 그것은 항상 기존의 HTML-CSS는 내용에 작동부트 스트랩 탭으로 스크롤 할 때 div를 애니메이션 처리합니다.

$(window).scroll(function() { 
    homeSlide(); 
}); 
function homeSlide() { 
    var wScroll = $(window).scrollTop(); 

    if($('.prev-div').offset().top - $(window).height()/2 < wScroll) { 

    $('.boxes').each(function(i) { 
     setTimeout(function() { 
     $('.boxes').eq(i).addClass('bounce-in');}, 100 *i); 
    }); 
    } 
}

합니다. 이제는 작동하지 않거나 더 잘 작동하지만 페이지가로드되는 즉시 스크롤됩니다. 부트 스트랩 ".tab-content"내부에서 일어나기 때문이라고 생각합니다. 그렇다면 ".active .tab-pane"을 참조하여 원하는 지점에 가까워지면서 기능을 작동시키는 방법은 무엇입니까? 당신의 도움으로이 문제를 해결할 수 있기를 바랍니다.
고맙습니다.

편집 : 여기서 JsFiddle에 원하는 효과를 간단하게 업로드했습니다. 여기에 link이 있습니다.

내가 "부트 스트랩의 .tab 콘텐츠"외부에서 작동하지만 내부에서는 작동하지 않는다고 말하면 내 기능을 상쇄해야한다고 생각합니다. 반복해서 시도했지만 긍정적 인 결과는 없었습니다.

출처

2016-09-01 Rusvelt2000

좀 더 많은 컨텍스트를 제공 할 수 있습니까, 아니면 jsfiddle 일 수 있습니까? '.boxes' 클래스가 애니메이션을 적용하려고합니까? –

집에 가면 추가 정보를 올리겠습니다. 어쨌든, 나는 그것이 작동하지 않는다고 잘못했는데, 작동하지만, 페이지가로드 될 때 애니메이션이 시작되고, 스크롤 할 때는 닫히지 않습니다. – Rusvelt2000

그것은해야하지> 대신 <

경우 ($ ('이전-DIV.') (오프셋) 상단 -.. $ (창) .height의()/2> wScroll)

출처

2016-09-02 14:38:50 jp1871

아니, 그렇게 작동하지 않습니다. 코드는 맞습니다. 이전의 다른 모든 웹 사이트에서 항상 작동합니다. 단지 "Bootstrap .tab-content> .tab- pane"의 일부이기 때문입니다. – Rusvelt2000

드디어 문제에 대한 해결책을 찾았습니다. "if"문에서 $(window)을 $('a[data-toggle="tab"]')으로 바꿔야했습니다.

function homeSlide() { 
    var wScroll = $(window).scrollTop(); 

    if($('.prev-div').offset().top - $('a[data-toggle="tab"]').height()/2 < wScroll) { 

    $('.boxes').each(function(i) { 
     setTimeout(function() { 
     $('.boxes').eq(i).addClass('bounce-in');}, 100 *i); 
    }); 
    } 
}

어쨌든 다른 탭을 스크롤하면 애니메이션이 실행되기 때문에 해결할 수없는 또 다른 문제가 있습니다. 거기에 해결책이 있습니까?

출처

2016-09-06 17:48:48 Rusvelt2000

부트 스트랩 탭으로 스크롤 할 때 div를 애니메이션 처리합니다.

답변

관련 문제