CODEWITHSUNDEEP
jqueryjquery-animate
Rob
Rob

Reputation: 1495

Adding a javascript bounce effect

I'm trying to add a very subtle bounce effect to the content area, seen in yellow, after clicking the '. Im guessing it would be done in javascript?

JS Fiddle

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>

JS

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

Upvotes: 0

Views: 1923

Answers (2)

Paulo Almeida
Paulo Almeida

Reputation: 8061

You can use the easing functions in Jquery UI. For instance, a clone of your jsFiddle using easeOutBounce:

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

EDIT: Answering comments, choice of the best easing function is of course subjective, but if you are not happy with any of those provided by Jquery, you can make your own. Robert Penner's Easing Functions is a good list of resources to start exploring, and there's an example on Forrst.com.

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

As @PauloAlmeida says, you should use jQueryUI to add more easing functions.

However, I would suggest animating the top property (because it looked like it wasn't working on my computer, because it couldn't scroll that many pixels), and using easeOutBack as your animation function.

Here is the Fiddle updated as per my suggestion.

Upvotes: 0

Related Questions