我是jQuery的新手,并且具有使用Prototype的经验。在Prototype中,有一种方法可以“刷新”元素-即。短暂地用另一种颜色突出显示它,并使它褪色恢复正常,以便吸引用户的眼球。jQuery中有这种方法吗?我看到了fadeIn,fadeOut和动画效果,但是看不到“ flash”之类的东西。也许这三者之一可以与适当的输入一起使用?
text-decoration:blink
,然后将其删除。
我是jQuery的新手,并且具有使用Prototype的经验。在Prototype中,有一种方法可以“刷新”元素-即。短暂地用另一种颜色突出显示它,并使它褪色恢复正常,以便吸引用户的眼球。jQuery中有这种方法吗?我看到了fadeIn,fadeOut和动画效果,但是看不到“ flash”之类的东西。也许这三者之一可以与适当的输入一起使用?
text-decoration:blink
,然后将其删除。
Answers:
我的方式是.fadein,.fadeout .fadein,.fadeout ......
$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
$('..').delay(100).fadeOut().fadeIn('slow')
var $someElement = $("#someElement"); $someElement.fadeIn(100, function(){ $someElement.fadeOut(100, function(){ /*...etc...*/ }) })
您可以使用jQuery Color插件。
例如,要引起对页面上所有div的关注,可以使用以下代码:
$("div").stop().css("background-color", "#FFFF9C")
.animate({ backgroundColor: "#FFFFFF"}, 1500);
编辑-新增和改进
以下使用与上述相同的技术,但具有以下附加优点:
扩展jQuery对象:
var notLocked = true;
$.fn.animateHighlight = function(highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
var originalBg = this.css("backgroundColor");
if (notLocked) {
notLocked = false;
this.stop().css("background-color", highlightBg)
.animate({backgroundColor: originalBg}, animateMs);
setTimeout( function() { notLocked = true; }, animateMs);
}
};
用法示例:
$("div").animateHighlight("#dd0000", 1000);
Note: The jQuery UI project extends the .animate() method by allowing some non-numeric styles such as colors to be animated.
-如果要对颜色进行动画处理,则需要jQuery UI或其他插件。
您可以使用CSS3动画来闪烁元素
.flash {
-moz-animation: flash 1s ease-out;
-moz-animation-iteration-count: 1;
-webkit-animation: flash 1s ease-out;
-webkit-animation-iteration-count: 1;
-ms-animation: flash 1s ease-out;
-ms-animation-iteration-count: 1;
}
@keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
@-webkit-keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
@-moz-keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
@-ms-keyframes flash {
0% { background-color: transparent; }
50% { background-color: #fbf8b2; }
100% { background-color: transparent; }
}
然后您jQuery添加类
jQuery(selector).addClass("flash");
@keyframes
和animation
规则,因此除了(对于Blackberry浏览器)也许 不需要使用任何带前缀的版本-webkit-
。
通过在其后面放置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()
之后淡入淡出/ unfade所述对象的不透明度-
您可以在此网页的右下角查看此内容:https : //single.majlovesreg.one/v1/
通过使用$(this)并调整值以自动执行刷新(根据OP的要求)来编辑(将钢)没有重复的选择器。
fadeTo(0000)
-Metallica
$.fn.flashUnlimited=function(){$(this).fadeTo('medium',0.3,function(){$(this).fadeTo('medium',1.0,$(this).flashUnlimited);});}
然后,您可以像这样称呼它$('#mydiv').flashUnlimited();
-它执行了Majal的上述回答,并在周期结束时再次自称。
如果您使用的是jQueryUI,则pulsate
在UI/Effects
$("div").click(function () {
$(this).effect("pulsate", { times:3 }, 2000);
});
pulsate
在Chrome中正常运行。
您可以使用此插件(将其放入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 );
您可以通过允许迭代次数执行多次闪烁来进一步扩展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
var iterationDuration = Math.floor(duration / iterations);
以便您可以除以奇数并将其设置为return this;
可以在其后链接其他方法。
(不需要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'))
这可能是最新的答案,而且可能更短,因为自从这篇文章以来,事情已经有所巩固。需要jquery-ui-effect-highlight。
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
我不敢相信这还不是这个问题。您要做的一切:
("#someElement").show('highlight',{color: '#C8FB5E'},'fast');
这正是您想要做的事,非常简单,适用于show()
和hide()
方法。
会 脉冲效应(离线)JQuery插件适合您要寻找的东西吗?
您可以添加持续时间以限制脉冲效果。
正如JP在评论中提到的那样,现在有他 更新的Pulse插件。
查看他的GitHub存储库。这是一个演示。
以下代码对我有用。定义两个淡入和淡出功能,并将它们放在彼此的回调中。
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);
以下内容控制闪烁的时间:
var count = 3;
var fIn = function() { $(this).fadeIn(300, fOut); };
var fOut = function() { if (--count > 0) $(this).fadeOut(300, fIn); };
$('#element').fadeOut(300, fIn);
我一直在寻找解决此问题的方法,但不依赖jQuery UI。
这就是我想出的,并且对我有用(没有插件,只有Javascript和jQuery);-这是工作中的小提琴-http: //jsfiddle.net/CriddleCraddle/yYcaY/2/
将CSS文件中的当前CSS参数设置为普通的CSS,并创建一个仅处理该参数即可更改的新类,即background-color,并将其设置为“!important”以覆盖默认行为。像这样...
.button_flash {
background-color: #8DABFF !important;
}//This is the color to change to.
然后,只需使用下面的函数并将DOM元素作为字符串传递,则为要发生闪烁的次数的整数,要更改为的类,以及延迟的整数。
注意:如果为“ times”变量输入偶数,则将以您开始的类结尾,如果传递奇数,则将以切换的类结尾。两者对于不同的事物都是有用的。我使用“ i”更改延迟时间,否则它们将同时触发,并且效果会消失。
function flashIt(element, times, klass, delay){
for (var i=0; i < times; i++){
setTimeout(function(){
$(element).toggleClass(klass);
}, delay + (300 * i));
};
};
//Then run the following code with either another delay to delay the original start, or
// without another delay. I have provided both options below.
//without a start delay just call
flashIt('.info_status button', 10, 'button_flash', 500)
//with a start delay just call
setTimeout(function(){
flashIt('.info_status button', 10, 'button_flash', 500)
}, 4700);
// Just change the 4700 above to your liking for the start delay. In this case,
//I need about five seconds before the flash started.
像淡入/淡出一样,您可以使用动画CSS /延迟
$(this).stop(true, true).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100).animate({opacity: 0.1}, 100).delay(100).animate({opacity: 1}, 100);
简单灵活
有一个动画背景错误的解决方法。本要点包括一个简单的突出显示方法及其用法的示例。
/* BEGIN jquery color */
(function(jQuery){jQuery.each(['backgroundColor','borderBottomColor','borderLeftColor','borderRightColor','borderTopColor','color','outlineColor'],function(i,attr){jQuery.fx.step[attr]=function(fx){if(!fx.colorInit){fx.start=getColor(fx.elem,attr);fx.end=getRGB(fx.end);fx.colorInit=true;}
fx.elem.style[attr]="rgb("+[Math.max(Math.min(parseInt((fx.pos*(fx.end[0]-fx.start[0]))+fx.start[0]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[1]-fx.start[1]))+fx.start[1]),255),0),Math.max(Math.min(parseInt((fx.pos*(fx.end[2]-fx.start[2]))+fx.start[2]),255),0)].join(",")+")";}});function getRGB(color){var result;if(color&&color.constructor==Array&&color.length==3)
return color;if(result=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
return[parseInt(result[1]),parseInt(result[2]),parseInt(result[3])];if(result=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
return[parseFloat(result[1])*2.55,parseFloat(result[2])*2.55,parseFloat(result[3])*2.55];if(result=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
return[parseInt(result[1],16),parseInt(result[2],16),parseInt(result[3],16)];if(result=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
return[parseInt(result[1]+result[1],16),parseInt(result[2]+result[2],16),parseInt(result[3]+result[3],16)];if(result=/rgba\(0, 0, 0, 0\)/.exec(color))
return colors['transparent'];return colors[jQuery.trim(color).toLowerCase()];}
function getColor(elem,attr){var color;do{color=jQuery.curCSS(elem,attr);if(color!=''&&color!='transparent'||jQuery.nodeName(elem,"body"))
break;attr="backgroundColor";}while(elem=elem.parentNode);return getRGB(color);};var colors={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0],transparent:[255,255,255]};})(jQuery);
/* END jquery color */
/* BEGIN highlight */
jQuery(function() {
$.fn.highlight = function(options) {
options = (options) ? options : {start_color:"#ff0",end_color:"#fff",delay:1500};
$(this).each(function() {
$(this).stop().css({"background-color":options.start_color}).animate({"background-color":options.end_color},options.delay);
});
}
});
/* END highlight */
/* BEGIN highlight example */
$(".some-elements").highlight();
/* END highlight example */
如果包含一个库太过分了,那么这里的解决方案一定可以正常工作。
$('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内部,使用fadeOut和fadeIn来创建一些动画效果。
在第二个setTimeout内部重置默认背景色
经过一些浏览器测试,效果很好。
不幸的是,最重要的答案需要JQuery UI。http://api.jquery.com/animate/
var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');
.flash {
background-color: yellow;
display: none;
position: absolute;
width: 100%;
height: 100%;
}
<div class="hello">Hello World!</div>
flash
一个jQuery对象,它就可以正常工作。var flash = $("<div class='flash'></div>"); $(".hello").prepend(flash); flash.show().fadeOut('slow');
这是colbeerhey解决方案的稍微改进的版本。我添加了return语句,以便以真正的jQuery形式在调用动画之后链接事件。我还添加了参数以清除队列并跳转到动画的结尾。
// Adds a highlight effect
$.fn.animateHighlight = function(highlightColor, duration) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
this.stop(true,true);
var originalBg = this.css("backgroundColor");
return this.css("background-color", highlightBg).animate({backgroundColor: originalBg}, animateMs);
};
这将触发元素的背景色,直到触发鼠标悬停事件
$.fn.pulseNotify = function(color, duration) {
var This = $(this);
console.log(This);
var pulseColor = color || "#337";
var pulseTime = duration || 3000;
var origBg = This.css("background-color");
var stop = false;
This.bind('mouseover.flashPulse', function() {
stop = true;
This.stop();
This.unbind('mouseover.flashPulse');
This.css('background-color', origBg);
})
function loop() {
console.log(This);
if( !stop ) {
This.animate({backgroundColor: pulseColor}, pulseTime/3, function(){
This.animate({backgroundColor: origBg}, (pulseTime/3)*2, 'easeInCirc', loop);
});
}
}
loop();
return This;
}
将以上所有内容组合在一起-轻松制作元素闪烁并返回到原始bgcolour的简单解决方案...
$.fn.flash = function (highlightColor, duration, iterations) {
var highlightBg = highlightColor || "#FFFF9C";
var animateMs = duration || 1500;
var originalBg = this.css('backgroundColor');
var flashString = 'this';
for (var i = 0; i < iterations; i++) {
flashString = flashString + '.animate({ backgroundColor: highlightBg }, animateMs).animate({ backgroundColor: originalBg }, animateMs)';
}
eval(flashString);
}
像这样使用:
$('<some element>').flash('#ffffc0', 1000, 3);
希望这可以帮助!
eval
!
这是一个混合使用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;
}
这足够通用,您可以编写任何要设置动画的代码。您甚至可以将延迟从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 Pulsate插件通过控制速度,重复和颜色来强制将注意力集中在任何html元素上。
带有演示的 JQuery.pulsate()*
示例初始化程序:
$.fn.flash = function(times, duration) { var T = this; times = times || 3; duration = duration || 200; for ( var i=0; i < times; i++ ) { (function() { setTimeout(function() { T.fadeOut(duration, function() { T.fadeIn(duration); }); }, i*duration*2+50); })(i); } };