我是全新的jQuery和有一些使用原型的经验。在Prototype中,有一个方法来“闪现”一个元素。简单地用另一种颜色突出它,然后让它变回正常,这样用户的眼睛就会被吸引到它上面。jQuery中有这样的方法吗?我看到淡出,淡出,和动画,但我没有看到任何像“闪光”。也许这三个中的一个可以与适当的输入一起使用?
当前回答
你可以使用这个插件(把它放在js文件中,并通过script-tag使用它)
http://plugins.jquery.com/project/color
然后用这样的方法:
jQuery.fn.flash = function( color, duration )
{
var current = this.css( 'color' );
this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
this.animate( { color: current }, duration / 2 );
}
这将为所有jQuery对象添加一个'flash'方法:
$( '#importantElement' ).flash( '255,0,0', 1000 );
其他回答
这可能是一个最新的答案,而且更简短,因为自从这篇文章以来,事情已经有所巩固。需要jquery-ui-effect-highlight。
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
http://docs.jquery.com/UI/Effects/Highlight
5年后……(并且不需要额外的插件)
这一个“脉冲”它到你想要的颜色(例如白色),在它后面放一个div背景色,然后淡入对象。
HTML对象(例如按钮):
<div style="background: #fff;">
<input type="submit" class="element" value="Whatever" />
</div>
jQuery(香草,没有其他插件):
$('.element').fadeTo(100, 0.3, function() { $(this).fadeTo(500, 1.0); });
元素——类名
fadeTo()中的第一个数字-转换的毫秒数
fadeTo()中的第二个数字-对象在fade/unfade之后的不透明度
你可以在这个网页的右下角查看:https://single.majlovesreg.one/v1/
编辑(willsteel)无重复选择器使用$(this)和调整值实际执行一个闪光(作为OP请求)。
如果包含一个库是多余的,这里有一个解决方案,是保证工作。
$('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重置默认背景色 在一些浏览器中进行了测试,效果很好。
这个函数使它闪烁。 它必须使用cssHooks,因为rgb默认返回background-color函数。
希望能有所帮助!
$.cssHooks.backgroundColor = {
get: function(elem) {
if (elem.currentStyle)
var bg = elem.currentStyle["backgroundColor"];
else if (window.getComputedStyle)
var bg = document.defaultView.getComputedStyle(elem,
null).getPropertyValue("background-color");
if (bg.search("rgb") == -1)
return bg;
else {
bg = bg.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
function hex(x) {
return ("0" + parseInt(x).toString(16)).slice(-2);
}
return "#" + hex(bg[1]) + hex(bg[2]) + hex(bg[3]);
}
}
}
function blink(element,blinkTimes,color,originalColor){
var changeToColor;
if(blinkTimes === null || blinkTimes === undefined)
blinkTimes = 1;
if(!originalColor || originalColor === null || originalColor === undefined)
originalColor = $(element).css("backgroundColor");
if(!color || color === null || color === undefined)
color = "#ffffdf";
if($(element).css("backgroundColor") == color){
changeToColor = originalColor;
}else{
changeToColor = color;
--blinkTimes;
}
if(blinkTimes >= 0){
$(element).animate({
"background-color": changeToColor,
}, {
duration: 500,
complete: function() {
blink(element, blinkTimes, color, originalColor);
return true;
}
});
}else{
$(element).removeAttr("style");
}
return true;
}
一个脉冲效果(离线)JQuery插件适合你正在寻找什么?
您可以添加一个持续时间,以便及时限制脉冲效果。
正如J-P在评论中提到的,现在有他更新的脉冲插件。 见他的GitHub回购。这是一个演示。
推荐文章
- 给一个数字加上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格式