Question

我有一个网页，对于内部链接，我想强调点击当前页面上的内部链接后访问者跳转的位置。这就像SO的评论或回答通知。首先，目标背景为橙色，然后平滑地变回白色。

我本可以这样做，但颜色变化不顺畅。

HTML部分

<a href="#section1">go to section 1</a>

<a href="http://google.com">Google</a>

<a name="section1"><a><h3 id="section1">Section 1</h3>

jQuery部分

$(function () {
    $("a[href^='#']").click(
    function () {
        var $id = $(this).attr("href");
        $($id).css({"background-color":"#cc7733", "transition":"background-color"});

        setTimeout(function () {
            $($id).css("background-color", "#ffffff");
        }, 2500);

    });

});

JS Fiddle是here

Answer 1

过渡应该有持续时间和缓和。

{"transition":"background-color 0.5s ease"}

注意：0.5s是采样时间，请将其更改为您自己的。

DEMO

Answer 2

问题在于您指定"transition":"background-color"并且未指定时间刻度。您需要将其更改为包含时间：

..."transition":"background-color 0.2s"

然而，更好的方法是在CSS本身设置transition属性，然后使用jQuery为元素提供一个新类：

/* Select any element with a href attribute. */
:link { /* You could use [href], but :link has better browser support */
    transition: 2.5s; /* Transition takes 2.5 seconds. */
}

.changedBackground {
    background: #fff;
}

$($id).addClass('changedBackground');

通过这种方式，您可以将样式与JavaScript分开，只需修改CSS即可轻松更改样式。

Answer 3

您可以像这样使用.animate()

$($id).stop()
      .css({"background-color":"#cc7733"},1000)
      .animate({"background-color":"#FFF"},1000);

注意：您需要在项目中加入jQuery UI才能使其生效。

DEMO

如何使用jquery平滑地更改项目的背景颜色？

3 个答案: