0

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

（不知何故）复制到：“ slideUp（）如何在jQuery中工作？我正在尝试制作自己的slideRIght（） ”

问题更新

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

喜欢：

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

第二次更新：

如果我尝试扩展 JQuery 来为颜色设置动画怎么办？（我不是要一个彩色动画算法），创建一个动画就像fadeOut调用它makeGreen

4

2 回答 2

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

于 2013-11-03T22:10:01.577 回答
0

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

我的第一个方法：

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

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

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

不起作用，因为borderColor:没有有效的动画（也red没有有效的值），所以它从所有动画逻辑中“失败”。

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

jQuery.cssHooks我用一个set函数扩展 jQuerieshighlight

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

于 2013-11-04T17:47:03.233 回答