0

我有一个 1px 实心边框的 div。我想用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);
    }
    );
4

1 回答 1

0

您需要防止动画排队。

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);
    }
    );
于 2012-01-10T21:28:26.617 回答