Question

我正在运行循环以使元素的背景不断发光。

function fb_glow() {
    $('#dev_fb_image').delay(4000).animate({'background-color':'#4065b4'},2000).animate({'background-color': 'white'},2000);
    fb_glow();
}

fb_glow()

我通过在函数末尾调用函数来循环，但是它正在禁用下面的jquery的其余部分。但我想这不是做什么的。我哪里出错了？有没有更简单的方法让背景焕发光彩？

Answer 1

使用fadeIn，fadeOut效果添加和删除更改背景颜色的类。

// $.addClass("glow");
// $.removeClass("glow");

var glow = false;
var glowInterval = setInterval(function(){
     if(glow == true){
         glow = false;
         $('#dev_fb_image').removeClass("glow");
     }
     else {
          glow = true;
          $('#dev_fb_image').addClass("glow");
     }
},6000);

CSS：

.glow {
   background-color: green;
   transition: background-color 2s;
   -webkit-transition: background-color 2s;
}

Answer 2

看起来你需要大约8秒才能完成一个动画。

setInterval(
  fb_glow,
  8000 //-> or 9000 miliseconds to make sure you don't have any overlap.
);

setInterval将每8000毫秒（或8秒）调用fb_glow进行无限循环。

同时删除fb_glow();功能中的fb_glow。

function fb_glow() {
    $('#dev_fb_image').delay(4000).animate({'background-color':'#4065b4'},2000).animate({'background-color': 'white'},2000);

}

jQuery动画基于setInterval/setTimeout，它们是异步函数。这意味着fb_glow()将立即被调用，并且不会等待您的动画完成。

jQuery还提供了.done()功能。你应该试着看它是否有效。我完成的结果好坏参半。（你不应该使用setInterval ......）

function fb_glow() {
    $('#dev_fb_image')
      .delay(4000)
      .animate({'background-color':'#4065b4'},2000)
      .animate({'background-color': 'white'},2000)
      .done(fb_glow);
}

done类型：函数（Promise animation，Boolean jumpedToEnd）A 当元素上的动画完成时调用的函数（它的 Promise对象已解决）。（版本添加：1.8）

用于制作背景发光的jquery循环

2 个答案: