JQuery сбрасывает границы анимации - PullRequest
Новая
       8

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

0 голосов
/ 11 января 2012

У меня есть 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);
    }
    );

Я также импортирую пользовательский интерфейс из;

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

Моя проблема в том,

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

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

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

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

//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);
    }
    );

1 Ответ

0 голосов
/ 11 января 2012

Вам нужно запретить анимацию ставить в очередь . 

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);
    }
    );
...