javascript 闪烁的 jQuery .animation()

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6801341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-25 21:55:09  来源:igfitidea点击:

Flashing jQuery .animation()

javascriptjquerycssanimationjquery-animate

提问by matt

I'm currently using jquery-animate-colorsto animate the flashing of a border, but I think my code could use some cleanup. What's a better way to approach the following?

我目前正在使用jquery-animate-colors来动画边框的闪烁,但我认为我的代码可以使用一些清理。处理以下问题的更好方法是什么?

highlightRow = function(row, count) {             
if (count == null) {                            
    count = 0;                                    
}                                               
$(row).animate({                                
    "border-color": "#3737A2"                     
}, {                                            
    duration: 250,                                
    complete: function() {                        
    return $(row).animate({                     
        "border-color": "#FFFFFF"                 
    }, {                                        
        duration: 250,                            
        complete: function() {                    
            if (count === 0) {                      
                return highlightRow(row, count += 1); 
            }                                       
        }                                         
    });                                         
    }                                             
});                                             
};                                                

So I'm trying to have this just flash the border color on and off twice. I found that trying to animate border-color, you can't use anything besides hex codes. transparentand noneboth don't animate anything at all.

所以我试图让这只是两次打开和关闭边框颜色。我发现尝试制作动画时border-color,除了十六进制代码之外,您不能使用任何东西。transparent并且none两者都没有动画任何东西。

Anyways, looking for some help to clean this up! Thanks ahead :)

无论如何,寻找一些帮助来清理它!提前谢谢:)

回答by Alex

There's a jQuery UI effect called 'pulsate' - http://jqueryui.com/demos/effect/- might be worth a look?

有一个名为“pulsate”的 jQuery UI 效果 - http://jqueryui.com/demos/effect/- 值得一看吗?

Alternatively if you're looking for a custom solution, try the following. You can chain Animation effects and they'll all be appended to the animation queue;

或者,如果您正在寻找自定义解决方案,请尝试以下操作。您可以链接动画效果,它们都将附加到动画队列中;

higlightRow = function(row) {
  $(row).stop().animate({borderColor: "#3737A2"}, 250)
    .animate({borderColor: "#FFFFFF"}, 250)
    .animate({borderColor: "#3737A2"}, 250)
    .animate({borderColor: "#FFFFFF"}, 250);
}

Should change border colour from #3737A2 to #FFFFFF, to #3737A2, to #FFFFFF and then finish.

应该将边框颜色从 #3737A2 更改为 #FFFFFF,更改为 #3737A2,再更改为 #FFFFFF,然后完成。