我是全新的jQuery和有一些使用原型的经验。在Prototype中,有一个方法来“闪现”一个元素。简单地用另一种颜色突出它,然后让它变回正常,这样用户的眼睛就会被吸引到它上面。jQuery中有这样的方法吗?我看到淡出,淡出,和动画,但我没有看到任何像“闪光”。也许这三个中的一个可以与适当的输入一起使用?
当前回答
CSS支持所有主流浏览器的闪烁
.flash {
animation: flash 0.5s ease-out;
animation-iteration-count: 10;
}
@keyframes flash {
0% { opacity: 0.5; }
50% { opacity: 1.0; }
100% { opacity: 0.5; }
}
将这个类添加到要闪光的元素中
$(elem).addClass("flash");
迭代计数:10是你想让它闪烁的次数,不需要删除类,它会自己停止闪烁。
使用不透明度:这适用于任何颜色的元素,只要它不是透明的。
其他回答
这是足够通用的,你可以编写任何你想要动画的代码。您甚至可以将延迟从300ms减少到33ms,并退色等。
// Flash linked to hash.
var hash = location.hash.substr(1);
if (hash) {
hash = $("#" + hash);
var color = hash.css("color"), count = 1;
function hashFade () {
if (++count < 7) setTimeout(hashFade, 300);
hash.css("color", count % 2 ? color : "red");
}
hashFade();
}
一个脉冲效果(离线)JQuery插件适合你正在寻找什么?
您可以添加一个持续时间,以便及时限制脉冲效果。
正如J-P在评论中提到的,现在有他更新的脉冲插件。 见他的GitHub回购。这是一个演示。
你可以使用jquery的pulse插件来强制将注意力集中在任何html元素上,控制速度、重复和颜色。
jquery . pulse() *带有演示
样本初始化:
$ (" .pulse4 ") .pulsate({速度:2500}) $("。CommandBox按钮:可见”)。脉动({颜色:“#f00”,速度:200,达到:85,重复:15})
使用jQuery 1.10.2,这个脉冲两次下拉菜单,并将文本更改为错误。它还存储已更改属性的值以恢复它们。
// shows the user an error has occurred
$("#myDropdown").fadeOut(700, function(){
var text = $(this).find("option:selected").text();
var background = $(this).css( "background" );
$(this).css('background', 'red');
$(this).find("option:selected").text("Error Occurred");
$(this).fadeIn(700, function(){
$(this).fadeOut(700, function(){
$(this).fadeIn(700, function(){
$(this).fadeOut(700, function(){
$(this).find("option:selected").text(text);
$(this).css("background", background);
$(this).fadeIn(700);
})
})
})
})
});
通过回调完成-以确保没有动画丢失。
最简单的方法是这样做:
<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格式