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

How to change an item's background color smoothly using jquery?

本文关键字：颜色 背景 平滑 jquery 项目 何更改      更新时间：2023-09-26

我有一个网页，对于内部链接，我想强调访问者点击当前页面上的内部链接后跳转的位置。这就像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在这里

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

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

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

演示

问题是您指定的是"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即可轻松更改样式。

你可以像这个一样使用.animate()

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

注意：您需要在项目中包含jQuery UI，才能使动画工作。

DEMO

相关文章：