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 に答える