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