如何添加JQuery自定义动画

Question

我想让我的<dev>眨眼，比方说边框red，使用jquery如下：

$(element).fadeOut( 10 ).delay( 300 ).fadeIn( 10 )

所以它消失了(快！)，300毫秒的等待然后消失(再次快)

我想要(类似)：

$(element).css('border-color','red').delay( 300 ).css('background-color','')

或者：

$(element).highlight(0,'red').delay( 300 ).highlight(0,:off)

我的调查把我带到了JQuerys：

// Generate shortcuts for custom animations
jQuery.each({
slideDown: genFx("show"),
... ,
}, function( name, props ) {
jQuery.fn[ name ] = function( speed, easing, callback ) {
    return this.animate( props, speed, easing, callback );
};
});

现在我失去了疏忽。

还有人能帮我吗？

请不要告诉我如何解决它“其他方式”(计时器等等)，我想更好地理解JQuery，我认为我已经不远了，但是--正如前面提到的--卡住了。

(不知何故a)复制到："slideUp()是如何在jQuery中工作的？我正在尝试做我自己的slideRIght()“

问题更新

我的问题不是如何动画边框，我理解，jquery不想动画‘颜色’，我想以某种方式扩展JQuery以获得符合jquery延迟逻辑的0ms“动画”(从红色到绿色)：

像这样：

$('foo').fadeBorder('red', 0).delay(300).fadeBorder(:none,0)

第二次更新：

如果我尝试将JQuery扩展为动画颜色呢？(我不是在要求彩色动画算法)，创建一个像fadeOut这样的动画，就叫它makeGreen

Answer 1

jQuery将动画排在队列中，但前提是它知道动画；

我的第一次演讲：

$(element).css('border-color','red').delay( 300 ).css('background-color','green')

无法工作，因为.css()会立即执行(从红色到绿色，再到300 is )。

$(element).animate({borderColor: 'red}, time)

因为borderColor:不是有效的动画(而red不是有效值)，所以它“通过”了所有动画逻辑。

以下是两个工作解决方案，但我不知道是否允许以这种方式扩展jQuery：

我将jQueries jQuery.cssHooks扩展为highlight的set函数

解决方案1:使用CSS直接控制：

jQuery.cssNumber['highlight']=true // if not a number we get 'px' added to our 'state'
jQuery.cssHooks['highlight']={set: function (elem,state) {
      $(elem).css('border-color', state==1?'red':'');
      }
    };

$(element)
    .animate({highlight: 1},0)
    .delay(300)
    .animate({highlight: 0},0)

解决方案2:使用类名，以便通过CSS控制“突出显示”状态：

jQuery.cssHooks['highlight']={set: function (elem,foo) {
    $(elem).toggleClass('highlight');
    }
};

$(element)
    .animate({highlight: 0},0)
    .delay(300)
    .animate({highlight: 0},0)

JSFIDDLE

Answer 2

你可以尝试这样的方法：

$('selector').css('border', '0px solid red')
             .animate({borderWidth: 5}, 300)
             .delay(300)
             .animate({borderWidth: 0}, 300)

首先设置边框的属性，然后将其动画为5px宽度，稍等片刻，然后返回动画。

JSFiddle

你也可以把它做成插件：

$.fn.borderFlash = function(width, color, time, delay) {
    if (width === undefined) width = 5
    if (color === undefined) color = 'red'
    if (time === undefined) time = 300
    if (delay === undefined) delay = 300
    return this.css('border', '0px solid ' + color)
               .animate({borderWidth: width}, time)
               .delay(typeof delay === 'undefined' ? 300 : delay)
               .animate({borderWidth: 0}, time)
}

$('#selector').borderFlash()

JSFiddle