アニメーションでの色変更

今回は animate での色変更に挑戦したいと思います。
既に animate は何度か行っているため、「何をいまさら・・・」な感も否めませんが、
実は animate には色の変更機能が有りません(笑)
「何で出来ない?」と思った事は何度もありますが標準では動作しないのです。


 animate は値が数字のものしか動けないのは理解しているのですが
 色も16進の数字情報だと思うのですが・・・

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){

                $('#button').click(function() {
                      // init
                      $('#disp_area p').css({'color' : '#000000', 'background-color' : '#ffffff'});
                      // color change
                      $('#text_1').stop().animate({'color' : '#ff0000', 'background-color' : '#cccccc'}, 3000);
                      $('#text_2').stop().animate({'color' : '#00ff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_3').stop().animate({'color' : '#0000ff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_4').stop().animate({'color' : '#00ffff', 'background-color' : '#cccccc'}, 3000);
                      $('#text_5').stop().animate({'color' : '#ffff00', 'background-color' : '#cccccc'}, 3000);
                      $('#text_6').stop().animate({'color' : '#ff00ff', 'background-color' : '#cccccc'}, 3000);
                      //
                      $('#text_7').stop().animate({'color' : '#ff0000', 'background-color' : '#00cccc'}, 1500)
                                         .animate({'color' : '#00ff00', 'background-color' : '#cc00cc'}, 1500)
                                         .animate({'color' : '#0000ff', 'background-color' : '#cccc00'}, 1500)
                                         .animate({'color' : '#00ffff', 'background-color' : '#cc0000'}, 1500)
                                         .animate({'color' : '#ffff00', 'background-color' : '#0000cc'}, 1500)
                                         .animate({'color' : '#ff00ff', 'background-color' : '#00cc00'}, 1500)
                                         .animate({'color' : '#000000', 'background-color' : '#ffffff'}, 1500);
                });

            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--
        
            div {
                margin           : 10px;
            }

            p {
                margin           : 10px;
                padding          : 10px;
                width            : 300px;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="disp_area">
                <p id="text_1">Sample Message Text Red</p>
                <p id="text_2">Sample Message Text Lime</p>
                <p id="text_3">Sample Message Text Bule</p>
                <p id="text_4">Sample Message Text Cyan</p>
                <p id="text_5">Sample Message Text Yellow</p>
                <p id="text_6">Sample Message Text Magenta</p>
                <p id="text_7">Sample Message Text Color Change</p>
            </div>

            <div id="text_area">
                <button id="button">Color Change</button>
            </div>

        </div>
    </body>
</html>

sample

sample の button を click すると文字色と背景色が変更されます。
もちろん連続で色を変更することも出来ます。

行った内容は、「別途 jQuery UI を読み込む」でした。
色々と優秀な Plugin があるのですが、今回は jQuery の機能だけで完結してみました。

「jQuery UI」とは jQuery を使用した UI 用の機能を纏めたものです。
開発元が「The jQuery Project」なので安心です。
今回は jQuery より上記機能となる Color Animation と云う Effects を
使用する形となります。

・・・それにしても色変更の animate ぐらいは jQuery 標準で出来るように
変更してほしいなと思いますよね。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です