2

私はこのテーブルを持っています：

<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);

しかし、同じ結果で...どうやってこれを行うのですか?

4

2 に答える 2

7

jQueryアニメーションリファレンスから（私の強調）

以下に記載されている場合を除き、すべてのアニメーション化されたプロパティは単一の数値にアニメーション化する必要があります。数値以外のほとんどのプロパティは、基本的なjQuery機能を使用してアニメーション化できません（たとえば、幅、高さ、または左はアニメーション化できますが 、jQuery.Color（）プラグインを使用しない限り、background-colorはアニメーション化できません）。特に指定がない限り、プロパティ値はピクセル数として扱われます。単位emと％は、必要に応じて指定できます。

つまり、Color（）プラグインが必要か、独自のプラグインを作成する必要があるようです。

この質問に対するAndrewの答えは、ごくわずかな作業に必要なことを実行しているようです。

于 2012-05-01T12:51:59.763 に答える
3

他の人がすでに指摘しているように、間違いなく 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 デモ

この手法に関する別の回答を次に示します。

于 2012-05-01T13:29:13.703 に答える