Question

我找不到这个简单示例代码的解决方案。它是几个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 example

Answer 1

我认为解决这个问题的最佳方法是间隔时间。您可以设置动画间隔，然后清除该间隔以停止动画。

此外，由于您正在尝试为颜色设置动画，因此请确保您也使用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);
});

这是一个fiddle

如何删除与特定对象相关的实例化函数

1 个答案: