I am having trouble getting my addClass to transition with the duration option.  When I watch what happens to the class via Firebug I see the class name highlighted when I hover as if it was being changed but main_menu_hover is never added.  Once I move away the class is added but there is no transition to it, it is just added.  After that a hover will remove it and it appears again after leaving.

Here is the function as well as the CSS class I am trying to add:

   

    
 $(document).ready(function() {
 $("#main_menu ul li").hover(function() {
 $(this).addClass("main_menu_hover", 500);
 }, function() {
 $(this).removeClass("main_menu_hover", 500);
 });
});






    
.main_menu_hover {
 border: 1px solid #487ffb;
 background: rgba(72, 127, 251, 0.1) none repeat scroll 0 0;
 -moz-border-radius-topleft: 15px;
 -moz-border-radius-bottomright: 15px;
}