Border animation not functioning on hover. SlideToggle working fine

I am looking to transform the right border colour of a DIV when another is hovered upon. The solution to getting the slideToggle to work was a little different from what I've read up on so I imagine this solution will be slightly different.

Here is the very longhand code:

$(document).ready(function(){

$(".articleExpand").hide();开发者_如何学Python

$('.mainArticle').hover(function() {   
     $(this).find('.articleExpand').stop(true,true).slideToggle('medium');
  }); 


$("mainArticle").hover(function(){
  $(this).find('.articleExpand').animate({"borderRightColor" : "#cccccc"}, 300);
});


});

As I mentioned the slideToggle is fine but I am not sure how to integrate the animation.

Many thanks all,

Tom

Welcome to the wonderful world of JQuery UI! (That's what you need to use.)

http://jqueryui.com/demos/animate/

"The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:

backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color outlineColor with one of the following combinations:

hex (#FF0000) rgb (rgb(255,255,255)) names ("black")"