使.css基于毫秒重复几次-DRY

Make .css repeat several times based on milliseconds - DRY

本文关键字：几次 -DRY css 于毫秒      更新时间：2023-09-26

我正在努力学习改进我的代码，而不是重复我自己。我试图用.css()在消失之前制作一个美学设计元素"闪光"。我的结果是有效的，但我相信有更好/更短的方法来写这篇文章。

目前，我正在设置四个间隔，用于处理CSS的更改。

setTimeout( function(){
   $(outputID).css('border-right','2px solid #fff');
},500);
setTimeout( function(){
   $(outputID).css('border-right','2px solid #343434');
},1000);
setTimeout( function(){
   $(outputID).css('border-right','2px solid #fff');
},1500);
setTimeout( function(){
   $(outputID).css('border-right','2px solid #343434');
},2000);

使用DRY原理，最好的方法是什么？循环通过500毫秒的间隔，然后根据2000毫秒取消？以某种方式使用.delay()？

您可以使用数据驱动的方法

var objA = [{
    duration: 500,
    style: '2px solid #fff'
}, {
    duration: 1000,
    style: '2px solid #343434'
}, {
    duration: 1500,
    style: '2px solid #fff'
}, {
    duration: 2000,
    style: '2px solid #343434'
}];
for (var i = 0; i < objA.length; i++) {
    (function(i) {
        setTimeout(function() {
            $(outputID).css('border-right', objA[i].style);
        }, objA[i].duration);
    })(i);
}

确保使用IIFE在循环中创建closure以保留i变量

Pure CSS可以通过Keyframe Animations处理这类任务。我创建了一个fiddle来让您开始，但它需要调整(尤其是在我省略了供应商前缀的情况下(。基本上可以归结为：

@keyframes borderblink {
  0% {
    border: 2px solid blue;
  }
  49% {
    border: 2px solid blue;
  }
  50% {
    border: 2px solid white;
  }
  100% {
    border: 2px solid white;
  }
}
.mybox.border-animated {
     border: 2px solid blue;
     animation-name: borderblink;
     animation-duration: 0.4s;
     animation-iteration-count: 10;
}

如果你想支持不包含此功能的浏览器(IE8+9，Opera Mini(，你可以使用Modernizr进行功能检测，并且只在需要时调用你的javascript解决方案。但由于它只是一个视觉上的好东西，如果你还没有包括Modernizr，我可能不会走那么远。

详细介绍我对jquery animate:的评论

$(outputID)
    .delay(500)
    .animate({ borderColor: "#fff" }, 10)
    .delay(500)
    .animate({ borderColor: "#343434" }, 10)
    .delay(500)
    .animate({ borderColor: "#fff" }, 10)
    .delay(500)
    .animate({ borderColor: "#343434" }, 10)

当然，你可以使用变量来表示延迟时间，500与问题超时相匹配，10将动画"效果"减少为闪烁而非脉冲。

有很多方法可以实现这一点。使用带有一点jQuery的"纯"JavaScript，您可以执行以下操作：

// flash an element and call the callback when done
var flash = function(element, cb) {
    var counter = 0;
    var max = 4;
    var state = false;
    var animate = function() {
        // assume we have to css classes "off" and "on"
        if (state)
            element.removeClass("on").addClass("off");
        else
            element.removeClass("off").addClass("on");
        state = !state;
        counter++;
        if (counter<max)
            setTimeout(animate, 500);
        else {
            // make sure we end up in "off" state
            element.removeClass("on").addClass("off");
            if (cb instanceof Function) cb();
        }
    }
    animate();
}
// use it like
flash(myElement, function () {
    // we can even do stuff when flashing has stopped, how cool is that!
});

你好，如果您认为最好的方式，那么根据我的说法，您可以使用css动画关键帧。http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

但如果你只想通过javascript完成这项工作，那么你可以选择ammarce的答案。

相关文章：