jQuery
【jQuery】境界線の色をアニメーション化するプラグインBorderColorAnimate
May 4, 2018

BorderColorAnimateは境界線の色をアニメーション化するjQueryプラグイン
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="bordercoloranimate.min.js"></script> <style> body { font: bold 12px arial, sans-serif; } .center { text-align: center; } .mystyle { display: inline-block; width: 100px; height: 100px; margin: 100px 50px; line-height: 100px; border: 10px solid #66ff1a; border-radius: 10px; text-align: center; cursor: pointer; } </style> </head> <body> <div class="center"> <div id="test" class="mystyle">Click Here!</div> <div id="test2" class="mystyle">Click Again!</div> <div id="test3" class="mystyle">Mouse In/Out!</div> </div> <script> (function ($) { $(document).ready(function(){ $('#test').on('click', function(){ $(this).BorderColorAnimate('#ff1a4b'); }); $('#test2').on('click', function(){ $(this).BorderColorAnimate('#ff1a4b', 400, function(){$(this).BorderColorAnimate('#66ff1a');}); }); $('#test3').mouseenter(function () { $(this).BorderColorAnimate('#ff1a4b'); }).mouseleave(function () { $(this).BorderColorAnimate('#66ff1a'); }); }); })(jQuery); </script> </body>