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

时间:2015-06-09 09:25:41

标签: javascript jquery

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

5 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分: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,我可能不会走得那么远。

答案 2 :(得分:1)

详细说明我对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;所以闪烁而不是脉冲。

答案 3 :(得分:0)

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

答案 4 :(得分:0)

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

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