我是全新的jQuery和有一些使用原型的经验。在Prototype中,有一个方法来“闪现”一个元素。简单地用另一种颜色突出它,然后让它变回正常,这样用户的眼睛就会被吸引到它上面。jQuery中有这样的方法吗?我看到淡出,淡出,和动画,但我没有看到任何像“闪光”。也许这三个中的一个可以与适当的输入一起使用?
当前回答
纯jQuery解决方案。
(不需要jquery-ui/animate/color)
如果你想要的是黄色的“闪光”效果,而不加载jquery颜色:
var flash = function(elements) {
var opacity = 100;
var color = "255, 255, 20" // has to be in this format since we use rgba
var interval = setInterval(function() {
opacity -= 3;
if (opacity <= 0) clearInterval(interval);
$(elements).css({background: "rgba("+color+", "+opacity/100+")"});
}, 30)
};
上面的脚本简单地做了1s黄色淡出,非常适合让用户知道元素被更新或类似的事情。
用法:
flash($('#your-element'))
其他回答
只需要给elem.fadeOut(10).fadeIn(10);
这个函数使它闪烁。 它必须使用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;
}
你可以进一步扩展Desheng Li的方法,允许迭代计数进行多次闪光,如下所示:
// Extend jquery with flashing for elements
$.fn.flash = function(duration, iterations) {
duration = duration || 1000; // Default to 1 second
iterations = iterations || 1; // Default to 1 iteration
var iterationDuration = Math.floor(duration / iterations);
for (var i = 0; i < iterations; i++) {
this.fadeOut(iterationDuration).fadeIn(iterationDuration);
}
return this;
}
然后你可以调用方法的时间和闪光的数量:
$("#someElementId").flash(1000, 4); // Flash 4 times over a period of 1 second
你可以使用这个插件(把它放在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 );
我真不敢相信这还不是这个问题。你要做的就是:
("#someElement").show('highlight',{color: '#C8FB5E'},'fast');
这完全是你想要它做的,超级简单,适用于show()和hide()方法。
推荐文章
- NSLayoutConstraints是可动画的吗?
- 如何在另一个元素之后添加一个元素?
- src和dist文件夹的作用是什么?
- jQuery。由于转义了JSON中的单引号,parseJSON抛出“无效JSON”错误
- URL中的“#:~:text=”位置哈希值到底是什么?
- 如何使用jQuery检测页面的滚动位置
- 如何在JSON中使用杰克逊更改字段名
- 在JavaScript中根据键值查找和删除数组中的对象
- 防止在ASP中缓存。NET MVC中使用属性的特定操作
- jQuery: keyPress退格键不火?
- XMLHttpRequest Origin null不允许Access-Control-Allow-Origin for file:/// to file:///(无服务器)
- 重置setTimeout
- jQuery有不聚焦的方法吗?
- jQuery -替换字符串中某个字符的所有实例
- Ng-repeat结束事件