我是全新的jQuery和有一些使用原型的经验。在Prototype中,有一个方法来“闪现”一个元素。简单地用另一种颜色突出它,然后让它变回正常,这样用户的眼睛就会被吸引到它上面。jQuery中有这样的方法吗?我看到淡出,淡出,和动画,但我没有看到任何像“闪光”。也许这三个中的一个可以与适当的输入一起使用?
当前回答
你可以使用这段代码:) 更改mili值更改动画速度
var mili = 300
for (var i = 2; i < 8; i++) {
if (i % 2 == 0) {
$("#lblTransferCount").fadeOut(mili)
} else {
$("#lblTransferCount").fadeIn(mili)
}
}
其他回答
我正在用这个。虽然尚未在所有浏览器上测试。 按照你喜欢的方式修改它,
用法:hlight ($ (" # mydiv "));
function hlight(elementid){
var hlight= "#fe1414"; //set the hightlight color
var aspeed= 2000; //set animation speed
var orig= "#ffffff"; // set default background color
elementid.stop().css("background-color", hlight).animate({backgroundColor: orig}, aspeed);
}
注意:你需要一个jquery UI添加到你的头。
创建两个类,给每个类一个背景色:
.flash{
background: yellow;
}
.noflash{
background: white;
}
用下面的类创建一个div:
<div class="noflash"></div>
下面的函数将切换类并使其显示为闪烁:
var i = 0, howManyTimes = 7;
function flashingDiv() {
$('.flash').toggleClass("noFlash")
i++;
if( i <= howManyTimes ){
setTimeout( f, 200 );
}
}
f();
如果包含一个库是多余的,这里有一个解决方案,是保证工作。
$('div').click(function() {
$(this).css('background-color','#FFFFCC');
setTimeout(function() { $(this).fadeOut('slow').fadeIn('slow'); } , 1000);
setTimeout(function() { $(this).css('background-color','#FFFFFF'); } , 1000);
});
设置事件触发器 设置块元素的背景色 在setTimeout中使用淡出和淡出来创建一个小动画效果。 内秒setTimeout重置默认背景色 在一些浏览器中进行了测试,效果很好。
下面是一个混合使用jQuery和CSS3动画的解决方案。
http://jsfiddle.net/padfv0u9/2/
从本质上讲,你首先将颜色更改为“闪光”颜色,然后使用CSS3动画让颜色逐渐消失。你需要改变过渡持续时间,以使初始的“闪光”比淡出更快。
$(element).removeClass("transition-duration-medium");
$(element).addClass("transition-duration-instant");
$(element).addClass("ko-flash");
setTimeout(function () {
$(element).removeClass("transition-duration-instant");
$(element).addClass("transition-duration-medium");
$(element).removeClass("ko-flash");
}, 500);
其中CSS类如下所示。
.ko-flash {
background-color: yellow;
}
.transition-duration-instant {
-webkit-transition-duration: 0s;
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
transition-duration: 0s;
}
.transition-duration-medium {
-webkit-transition-duration: 1s;
-moz-transition-duration: 1s;
-o-transition-duration: 1s;
transition-duration: 1s;
}
最简单的方法是这样做:
<script>
setInterval(function(){
$(".flash-it").toggleClass("hide");
},700)
</script>
推荐文章
- 给一个数字加上st, nd, rd和th(序数)后缀
- 在jQuery中的CSS类更改上触发事件
- jQuery日期/时间选择器
- 我如何预填充一个jQuery Datepicker文本框与今天的日期?
- jQuery添加必要的输入字段
- JavaScript错误(Uncaught SyntaxError:意外的输入结束)
- navigator。gelocation。getcurrentposition有时有效有时无效
- 我如何使用jQuery按字母顺序排序一个列表?
- 如何在jQuery检索复选框值
- 停止缓存jQuery .load响应
- 为什么带有对象的typeof数组返回“对象”而不是“数组”?
- 使用jQuery动画addClass/removeClass
- 如何改变推和弹出动画在一个基于导航的应用程序
- 是否有可能收听“风格改变”事件?
- Moment.js中的弃用警告-不是公认的ISO格式