jQuery

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

May 4, 2018

BorderColorAnimateは境界線の色をアニメーション化するjQueryプラグイン

HTML

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

Download