javascript - How to change an item's background color smoothly using jquery? - Stack Overflow

admin管理员组

文章数量:1345412

I have a web page and for internal links I want to emphasis where the visitor jump after clicking on an internal link on current page. It is just like SO's ment or answer notification. First the target's background will be orange then it will smoothly turn back to white.

I could have done this but color change is not smooth.

HTML part

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

<a href="">Google</a>

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

jQuery part

$(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 is here

I have a web page and for internal links I want to emphasis where the visitor jump after clicking on an internal link on current page. It is just like SO's ment or answer notification. First the target's background will be orange then it will smoothly turn back to white.

I could have done this but color change is not smooth.

HTML part

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

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

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

jQuery part

$(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 is here

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 26, 2014 at 8:36 zkanocazkanoca 9,9681010 gold badges5353 silver badges9898 bronze badges 2

• Why don't you use jQuery to swap classes, and set the transition direct in the CSS rule? – emerson.marini Commented Aug 26, 2014 at 8:38
• Consider using CSS3 transition – Vikram Deshmukh Commented Aug 26, 2014 at 8:39

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Transition should have duration and easing.

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

NOTE: 0.5s is sample time, change this to your own.

DEMO

The problem is that you're specifying "transition":"background-color" and aren't specifying a time scale. You need to change this to include a time:

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

A better way to do it, however, would be to set the transition property on the CSS itself, then use jQuery to give the element a new class:

/* 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');

This way you keep the styling separate from the JavaScript, allowing you to easily change the style by only modifying the CSS.

You can use .animate() like this

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

Note: You need to include jQuery UI to your project for animate to work.

DEMO

本文标签： javascriptHow to change an item39s background color smoothly using jqueryStack Overflow