0

この単純なサンプル コードの解決策がわかりません。これは複数の DOM オブジェクトの連続アニメーションであり、それぞれのオブジェクトでホバーがオフになっているときに削除する必要があります。インスタンス化された関数を削除するには? 前もって感謝します！

var animBorderColor = function(targetElement, color, speed){
    $(targetElement).animate(
    {
        borderColor: 'rgba('+color+','+color+','+color+', 0.7)'
    }, 
    { 
    duration: speed, 
    complete: function(){
        if ( color == '100' ) { color = '200'; } else { color = '100';
        }
            animBorderColor(this, color, speed);
        }
    }
    );
};

$(document).ready(function(){
    $("#obj1").hover(
    function(){
        animBorderColor($(this), '100', 500);
    },
    function() {
        // ?? remove function instantiated above
    });

    $("#obj2").hover(
    function(){
        animBorderColor($(this), '100', 500);
    },
    function() {
        // ?? remove function instantiated above
    });
});

編集: Jsfiddle の例

4

1 に答える 1

0

これにアプローチする最良の方法は、間隔を空けることだと思います。アニメーション化する間隔を設定し、その間隔をクリアしてアニメーションを停止できます。

また、色をアニメーション化しようとしているので、jQuery UI も使用していることを確認してください。

サンプルコード:

function borderAnimate() {
    var color = $(this).css('borderTopColor').indexOf('rgba(100') > -1 ? 'rgba(200,200,200,0.7)' : 'rgba(100,100,100,0.7)';
    $(this).animate({
        borderTopColor: color,
        borderLeftColor: color,
        borderBottomColor: color,
        borderRightColor: color
    }, 500);
}
$('div').hover(function () {
    $this = this;
    window.loop = setInterval(function () {
        borderAnimate.call($this);
    }, 500);
}, function () {
    clearInterval(window.loop);
});

ここにフィドルがあります

于 2013-08-27T21:18:14.193 に答える