Animating a borderColor with jQueryUI


I have a series of div's that I want to highlight with a blue border, animating in on mouseenter, and out on mouseleave. When a div is clicked, it should retain it's border until a new div is clicked, which then animates the previous selection back to a white border.

Using the following code, the borders fade in, but they don't fade out:

$('div').hover(function(){ if (!$(this).hasClass('sel')) { $(this).stop().animate({borderColor:'#0000ff'}, 2000); } },function(){ if (!$(this).hasClass('sel')) { $(this).stop().animate({borderColor:'#ffffff'}, 2000); } }).click(function(e){ $('.sel').not(this).stop().animate({borderColor:'#ffffff'}, 2000).removeClass('sel'); $(this).addClass('sel'); });

<a href="http://jsfiddle.net/reEsa/" rel="nofollow">http://jsfiddle.net/reEsa/</a>


It appears that the border goes to white first, and then changes to the specified color, rather than going to the color directly. Maybe submit a bug report to jQuery if it has not been already.

I did a workaround where I placed the divs inside a parent div, and made the padding 4 to simulate the border. I gave the parent div a white background, then animated the background color of the parent div. I removed the clicking just to show the problem case.

<a href="http://jsfiddle.net/reEsa/4/" rel="nofollow">jsfiddle here</a>

I would wrap this in a short little jQuery plugin, that appends the div you call it on to a new div that the plugin creates to make it easier to code and read when you are actually applying it.

Let me know if you have any questions and I will be happy to try to answer them.


  • Google Maps OverlayView: make only SVG clickable
  • Google Maps OverlayView: make only SVG clickable
  • passing data between view controllers programmatically Swift
  • JavaScript get page coordinates of closest clicked character
  • map map return flat array in jQuery
  • select only 1st level of nested elements
  • How do I interpolate a line number from __LINE__ into the name of a test in Perl?
  • C#: How To Crosshatch A Bar In An ASP.Net Bar Chart
  • jquery bind submit event - find caller
  • Limit the number of visible pages in pagination
  • Fading between images
  • Increasing dimensions on hover without changing the position of other elements
  • jquery if else condition for css api
  • AJAX Chat Box Scrolling Up Issue
  • jQuery, Calling multiple animations in a row on click
  • How to keep button state across different pages?
  • I have a modal that opens a second modal and cannot close the first modal if open then close the sec
  • Get highlight text in current window and send it in a popup
  • Change the width of the JQM panels
  • Variant from android-autofittextview library : scaling makes strange behaviour
  • Get css animation property with jQuery
  • jQueryUI dialog replacement for confirm?
  • How do you remove the JComboBox 'click and see dropdown' functionality?
  • div fade-in when window is scrolled a certain distance from the top
  • How can I tell a form not to dispose a particular control when it closes?
  • SonarQube: Cannot deactivate rule with missing quality profile
  • Ajax Upload File: $_FILES is empty but files exists in request header
  • Can I check if a recipient has an automatic reply before I send an email?
  • Change multiple background-images with jQuery
  • Menu Color Fade on Hover with Jquery
  • Trying to switch camera back to front but getting exception
  • bootstrap to use multiple ng-app
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • How to get icons for entities from eclipse?
  • Turn off referential integrity in Derby? is it possible?
  • JaxB to read class hierarchy
  • Binding checkboxes to object values in AngularJs
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?