jquery - 添加 javascript 弹跳效果

Question

我正在尝试为内容区域添加一个非常微妙的反弹效果，在单击“。我猜它会在javascript中完成？

JS小提琴

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;
});

Answer 1

您可以在 Jquery UI 中使用缓动函数。例如，您的 jsFiddle 的克隆使用easeOutBounce：

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

编辑：回答评论，选择最佳缓动功能当然是主观的，但如果您对 Jquery 提供的任何功能不满意，您可以自己制作。Robert Penner 的 Easing Functions是开始探索的一个很好的资源列表，Forrst.com 上有一个示例。

Answer 2

正如@PauloAlmeida 所说，您应该使用jQueryUI 添加更多缓动功能。

但是，我建议对top属性进行动画处理（因为它看起来无法在我的计算机上运行，​​因为它无法滚动那么多像素），并easeOutBack用作您的动画功能。

这是根据我的建议更新的小提琴。