jquery сбрасывает границу анимации

Question

У меня есть div с 1px сплошной рамкой. и я хочу дать ему цветную анимацию границы с jquery. Вот мой код;

//Products border motion 
jQuery(".products-two").mouseenter(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#999999'},400); 
    }).mouseleave(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#E6E6E6'}, 800); 
    } 
    ); 

Я также импортирую класс ui;

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js

Моя проблема;

Когда функция mouseleave работает, она сначала удаляет границу, а затем меняет цвет рамки. И это не дает плавного движения. Что мне делать?

ОБНОВЛЕНИЕ. Я также изменил время движения и теперь понял, что это происходит и при входе мыши. Сначала он удаляет границу, затем добавляет границу и меняет цвет.

РЕШЕНИЕ. Поскольку я не могу ответить на мои вопросы, я хотел поделиться решением для других, которые могут заинтересовать.

Я предполагаю, что это ошибка в классе jquery ui. Потому что, когда я использую обычную библиотеку jquery со свойствами границы по умолчанию, она работает. Я пропустил этот ui-метод и использовал его как временное решение.

//Products border motion 
    jQuery(".products-two").mouseenter(
    function(){ 
     jQuery(this).stop().animate({borderTopColor:'#999999', borderBottomColor:'#999999',borderLeftColor:'#999999',borderRightColor:'#999999'},400); 
    }).mouseleave(
    function(){ 
     jQuery(this).stop().animate({borderTopColor:'#E6E6E6', borderBottomColor:'#E6E6E6',borderLeftColor:'#E6E6E6',borderRightColor:'#E6E6E6'},400); 
    } 
    ); 

Answer 1

Необходимо, чтобы у вас было prevent the animation from queueing.

jQuery(".products-two").mouseenter(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#999999'},400); 
    }).mouseleave(
    function(){ 
     jQuery(this).stop(true,true).animate({borderColor: '#E6E6E6', queue: false}, 800); 
    } 
    );