Question

我正在努力学习改进我的代码而不是重复自己。我试图使用.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()？

Answer 1

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

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

Answer 2

纯CSS可以通过Keyframe Animations处理此类任务。我创建了一个fiddle to get you started，但需要进行调整（特别是当我省略了供应商前缀时）。它基本归结为：

@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，我可能不会走得那么远。

Answer 3

详细说明我对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减少动画效果＆＃39;所以闪烁而不是脉冲。

Answer 4

有很多方法可以实现这一目标。使用带有一点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!
});

Answer 5

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

但如果你只想通过javascript完成工作，那么你可以选择ammarcse'。

根据毫秒重复.css重复几次 - 干

5 个答案: