滚动到并制作 Div Flash？

Posted 2023-05-08

【中文标题】滚动到并制作 Div Flash？

【英文标题】：Scroll to and Make Div Flash?

【发布时间】：2013-11-07 14:38:14

【问题描述】：

我正在尝试将锚点滚动（动画）到特定的 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>

And here is the JSFiddle

【问题讨论】：

***.com/questions/6682451/… 试试这个卷轴

【参考方案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/

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