如何添加 JQuery 自定义动画答案

【问题标题】：How to add a JQuery custom animation如何添加 JQuery 自定义动画
【发布时间】：2013-11-03 22:01:40
【问题描述】：

我想让我的<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，我认为我并不遥远，但是 - 如前所述 - 卡住了

（不知何故）复制到：“How does slideUp() work in jQuery? I'm trying to make my own slideRIght()”

问题更新

我的问题不是如何为边框设置动画，我知道，jquery 不喜欢为“颜色”设置动画，我想以某种方式扩展 JQuery 以获得 0ms 的“动画”（来自红色到绿色，例如）适合 jquery 延迟逻辑：

喜欢：

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

第二次更新：

如果我尝试扩展 JQuery 来为颜色设置动画会怎样？（我不是要彩色动画算法），创建像fadeOut 这样的动画就叫它makeGreen

【问题讨论】：

标签： jquery jquery-animate delay

【解决方案1】：

你可以试试这样的：

$('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

【讨论】：

非常接近，我仍然与borderWidth 挂起borderColor 没有，我想将我的“动画”隐藏在.blinkFrame('red',300) 或类似的东西中
谢谢，我再次编辑了我的问题，我不想为边框设置动画，我想获得自己的“闪烁” - 伪动画，适合 .delay()
@halfbit 抱歉，我得走了，等我回来编辑我的答案

【解决方案2】：

jQuery 将其动画排队，但前提是它知道它们；

我的第一个方法：

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

不能工作，因为.css() 会立即执行（红到绿，然后是 300 毫秒）。

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

不起作用，因为borderColor: 不是有效的动画（而red 没有有效的值）所以它“通过”所有动画逻辑。

以下是 2 个可行的解决方案，但我不知道是否推荐（允许）以这种方式扩展 jQuery：

我扩展 jQueries jQuery.cssHooks 与 set 函数 highlight

方案一：使用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

【讨论】：