4 Demos of Animate Border Color on click or mouseover by jQuery: BorderColorAnimate

The border color animation plug-in

The BorderColorAnimate plug-in is a simple way out of implementing the border color animation for any HTML element in DOM. The border color can be animated on click or as the mouse is entered into the specified element. You may customize it to be used for other events as well.

The solution is small in size, only 2 Kb minified version which is negligible if you are already using the jQuery.

Demo1 Demo2
Developer’s page Download plug-in

Setting up border animation plug-in

Include the bordercoloranimate.min.js file in the <head> section.

<script src=”js/bordercoloranimate/bordercoloranimate.min.js”></script>

Use the ID or class of the specified element in the jQuery code where you want to produce animation:

    $('#border-animation-demo').on('click', function(){

      $(this).BorderColorAnimate('#ff1a4b');

    });

 

An example of animate border by jQuery on click

In this example, the border of a div element will animate upon clicking inside the div. Just click inside the div text to see it working. The animation will work once only. See the next demo for animating border on each click:

jQuery border animation

See online demo and code

The following markup and jQuery code is used for this demo:

<div class="center">

  <div id="border-animation-demo" class="border-animation-style">Click for animation!</div>

</div>

<script>

(function ($) {

  $(document).ready(function(){

    $('#border-animation-demo').on('click', function(){

      $(this).BorderColorAnimate('#800040');

    });

  });

})(jQuery);

</script>

 

A demo of animating border on each click with options

In the following demo, the border of the div element will animate on each click with the provided colors. The duration of animation is also set in the jQuery code. For the demo, I specified the 1.2 seconds i.e. 1200 milliseconds:

jQuery border animation click

See online demo and code

The jQuery code:

<script>

(function ($) {

  $(document).ready(function(){

    $('#border-animation-demo').on('click', function(){

      $(this).BorderColorAnimate('#800040', 1200, function(){$(this).BorderColorAnimate('#808040');});

    });

  });

})(jQuery);

</script>

 

Animate border on mouse in and out

You may use the mouseenter and mouseleave events of jQuery for animating the border as well. See this demo where two colors are provided with 800 milliseconds duration. For animating the border color, take the mouse in then out of the div:

jQuery border animation mouse

See online demo and code

The code:

 

 $(document).ready(function(){

    $('#border-animation-demo').mouseenter(function () {

      $(this).BorderColorAnimate('#804000',800);

    }).mouseleave(function () {

      $(this).BorderColorAnimate('#AEAEFF', 800);

    });   

  });

 

Grab the complete code from the example page.

A demo of animating HTML table border

Not only you may animate the border of div or paragraph etc. but also other HTML elements like tables.

In this example, an HTML table is created with a little CSS for styling and thick border for demonstration. The border animation to the outer border of the table is done by using the plug-in. The animation will occur with mouse enter and out over the main border of the table. Have a look:

jQuery border animation table

See online demo and code

The similar code is used as in above example except for the ID of the table is changed.