javascript - 滚动到并制作 Div Flash？

Question

我正在尝试将锚点滚动（动画）到特定的 div，然后使该 div 闪烁 3 次以引起用户的注意，但我不确定我做错了什么.. 我不知道如何让它滚动，颜色不会改变。如何让它滚动然后闪烁 3 次？

<a href="#" class="rulesflash">Scroll To and Make Box Flash</a>

<div id="rules">
    <h3>Rules Section</h3>

    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
</div>

这是JSFiddle

Answer 1

您需要使用 jQuery 的 animate() 来处理滚动，然后使用淡入和淡出函数来使其隐藏和显示。

$(".rulesflash").click(function () {
    $('body').animate({
        scrollTop: $("#rules").offset().top
    }, 2000, function () {
        $("#rules").fadeOut();
        $("#rules").fadeIn();
        $("#rules").fadeOut();
        $("#rules").fadeIn();
        $("#rules").fadeOut();
        $("#rules").fadeIn();
    });
});

演示：http: //jsfiddle.net/Hhks4/1/

编辑：

我再次查看了您的帖子，看起来您想要突出显示效果而不是隐藏/显示，所以我添加了更改我的代码。

$(".rulesflash").click(function () {
    $('body').animate({
        scrollTop: $("#rules").offset().top
    }, 2000, function () {
        $("#rules").effect("highlight", {}, 500);
        $("#rules").effect("highlight", {}, 500);
        $("#rules").effect("highlight", {}, 500);        
    });
});

http://jsfiddle.net/Hhks4/3/

PS 你需要 jQuery UI 来调用 .effect() 方法