无法使用 jQuery 对边框颜色进行动画处理

Can't animate the border color with jQuery

本文关键字：颜色 动画 处理 边框 jQuery      更新时间：2023-09-26

我有这个表：

<table id="social" border="5">
    <tr>
        <td>
            <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fyannbane.blogspot.com%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.com/share" class="twitter-share-button" data-url="http://yannbane.blogspot.com/" data-via="Yannbane">Tweet</a>
        </td>
        <td>
            <g:plusone></g:plusone>
        </td>
    </tr>
</table>

我想用jquery动画它的边框，像这样：

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

但是，它不起作用！什么也没发生，甚至没有显示任何错误......

我也试过这个：

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

但结果相同...你是怎么做到的？

来自 jQuery animate 参考（我的强调）

所有已动画处理的属性都应动画化为单个数值， 除非下文另有说明;大多数非数字属性不能 使用基本的 jQuery 功能进行动画处理（例如，宽度、 高度或左侧可以动画，但背景色不能， 除非使用 jQuery.Color（） 插件）。处理属性值 除非另有说明，否则为像素数。单位 em 和 % 可以在适用的情况下指定。

简而言之，看起来您要么需要 Color（） 插件，要么需要自己动手。

安德鲁对这个问题的回答似乎只需要很少的工作。

您绝对应该像其他人已经指出的那样使用 Color 插件。

但是，作为旁注，您可以使用一种有趣的技术，该技术由动画变量（在本例中为变量color），然后在step函数中执行操作。

这可能有点矫枉过正，但为您提供了很大的灵活性来执行自定义动画：

// 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 演示

这是关于这项技术的另一个答案。

相关文章：