자바 스크립트 바운스 효과 추가하기

''을 클릭 한 후 노란색으로 표시된 콘텐츠 영역에 매우 미세한 바운스 효과를 추가하려고합니다. 그것을 추측하고있는 Im는 javascript에서하게 될 것이다?자바 스크립트 바운스 효과 추가하기

HTML

<div class="block"> 
    <h2>This is green block is fixed</h2> 

</div> 
<div class="content" id="here"> 
    <div class="headerbar"> <a href="#here">Top/Reveal</a> 
Sublte Bounce 
    </div> 
</div>

$("a[href='#here']").click(function() { 
    $("html, body").animate({ 
     scrollTop: $("body").scrollTop() == 0 ? 300 : 0 
    }, "slow"); 
    return false; 
});

출처

2013-07-29 Rob

그래서 ... 이미하고있는 일 외에 원하는 것이 정확히 무엇입니까? –

[jQuery 바운스 이펙트] (http://api.jqueryui.com/easings/)가 포함 된 경우, 세 번째 매개 변수로''바운스''를''animate''로 전달하면됩니다. – jbabey

당신은 easing functions in Jquery UI를 사용할 수 있습니다. 예를 들어, clone of your jsFiddle는 easeOutBounce를 사용하여 :

$("a[href='#here']").click(function() { 
    $("html, body").animate({ 
     scrollTop: $("body").scrollTop() == 0 ? 300 : 0 
    }, "slow", "easeOutBounce"); 
    return false; 
});

편집 : 응답 코멘트 가장 여유 함수의 선택은 물론 주관적이다,하지만 당신은 jQuery를 제공하는 것과 어떤 행복하지 않은 경우, 당신은 할 수 있습니다 너 스스로. Robert Penner's Easing Functions은 탐험을 시작할 수있는 좋은 자료 목록이며 example on Forrst.com입니다.

출처

2013-07-29 20:13:12

'easeOutBack'이 더 나은 선택이라고 생각했습니다. –

어쨌든 이것을 조정할 수 있습니까? 그래서 얼마나 튀어 오르는 지 정의 할 수 있습니까? – Rob

@Rob [이 질문보기] (http://stackoverflow.com/questions/14707605/jquery-ui-easeoutbounce-needs-to-be-more-bouncy) –

@PauloAlmeida가 말하기를 jQueryUI를 사용하여 더 많은 여유 함수를 추가해야합니다.

그러나 top 속성을 애니메이트하는 것이 좋습니다 (내 컴퓨터에서 작동하지 않는 것처럼 보입니다. 많은 픽셀을 스크롤 할 수 없기 때문에). easeOutBack을 애니메이션 기능으로 사용합니다.

Here은 필자의 제안대로 업데이트되었습니다.

출처

2013-07-29 20:19:35

자바 스크립트 바운스 효과 추가하기

답변

관련 문제