javascript - Can't animate the border color with jQuery - Stack Overflow

admin管理员组

文章数量:1336631

I have this table:

<table id="social" border="5">
    <tr>
        <td>
            <iframe src="//www.facebook/plugins/like.php?href=http%3A%2F%2Fyannbane.blogspot%2F&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=177127339057410" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
        </td>

        <td>
            <a href="" class="twitter-share-button" data-url="/" data-via="Yannbane">Tweet</a>
        </td>

        <td>
            <g:plusone></g:plusone>
        </td>
    </tr>
</table>

And I'd like to animate its borders with jquery, like this:

$("#social").animate({"borderTopColor": "#f00", "borderBottomColor": "#fff"}, 800);

But, it doesn't work! Nothing happens at all, even no errors are shown...

I've also tried this:

$("#social").animate({"border-top-tolor": "#f00", "border-bottom-color": "#fff"}, 800);

But with same results... How do you do this?

I have this table:

<table id="social" border="5">
    <tr>
        <td>
            <iframe src="//www.facebook./plugins/like.php?href=http%3A%2F%2Fyannbane.blogspot.%2F&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=177127339057410" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
        </td>

        <td>
            <a href="https://twitter./share" class="twitter-share-button" data-url="http://yannbane.blogspot./" data-via="Yannbane">Tweet</a>
        </td>

        <td>
            <g:plusone></g:plusone>
        </td>
    </tr>
</table>

And I'd like to animate its borders with jquery, like this:

$("#social").animate({"borderTopColor": "#f00", "borderBottomColor": "#fff"}, 800);

But, it doesn't work! Nothing happens at all, even no errors are shown...

I've also tried this:

$("#social").animate({"border-top-tolor": "#f00", "border-bottom-color": "#fff"}, 800);

But with same results... How do you do this?

• javascript
• jquery
• html
• animation
• html-table

Share Follow edited Oct 10, 2017 at 19:04 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 1, 2012 at 12:47 corazzacorazza 32.4k3939 gold badges120120 silver badges191191 bronze badges 2

• 1 possible duplicate of jQuery animate border color on hover? – epascarello Commented May 1, 2012 at 12:50
• 1 @epascarello There's no indication the OP is using the Color plugin – Basic Commented May 1, 2012 at 12:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

From the jQuery animate reference (my emphasis)

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

In short, it looks like you either need the Color() plugin or you need to roll your own.

Andrew's answer on this question seems to do what you need for very little work.

You should definitely use the Color plugin as others already pointed out.

However, as a side note, you can use instead an interesting technique that consists animating variables (in this case color variable) and then do your stuff in the step function.

This might be a bit overkill, but gives you lots of flexibility to do custom animations:

// animate color variable from 0x0 to 0xF
$({ color: 0 }).animate({ color: 15}, {
    duration: 800,
    step: function(now, fx) {
        var hexValue = Math.round(now).toString(16);
        $("#social").css({
            'border-top-color': '#' + hexValue + '00',
            'border-bottom-color': '#' + hexValue + hexValue + hexValue
        });
    }
});

jsfiddle demo

Here is another answer regarding this tecnhique.

本文标签： javascriptCan39t animate the border color with jQueryStack Overflow