私はjQueryを初めて使用し、Prototypeの使用経験があります。プロトタイプには、要素を「フラッシュ」する方法があります。別の色で簡単にハイライトし、通常の色にフェードバックして、ユーザーの目を引き付けます。jQueryにそのようなメソッドはありますか？フェードイン、フェードアウト、アニメーションが表示されますが、「フラッシュ」のようなものは表示されません。おそらく、これら3つのうちの1つを適切な入力で使用できますか？
Decker
質問する
343576 次
38 に答える
367
私のやり方は.fadein、.fadeout .fadein、.fadeout.....です。
$("#someElement").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100);
function go1() { $("#demo1").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100)}
function go2() { $('#demo2').delay(100).fadeOut().fadeIn('slow') }#demo1,
#demo2 {
text-align: center;
font-family: Helvetica;
background: IndianRed;
height: 50px;
line-height: 50px;
width: 150px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="go1()">Click Me</button>
<div id='demo1'>My Element</div>
<br>
<button onclick="go2()">Click Me</button> (from comment)
<div id='demo2'>My Element</div>于 2012-02-01T14:19:07.350 に答える
126
jQueryColorプラグインを使用できます。
たとえば、ページ上のすべてのdivに注意を引くには、次のコードを使用できます。
$("div").stop().css("background-color", "#FFFF9C")
.animate({ backgroundColor: "#FFFFFF"}, 1500);
編集-新しく改善された
以下は上記と同じ手法を使用しますが、次の利点があります。
- パラメータ化されたハイライトの色と継続時間
- 白であると想定する代わりに、元の背景色を保持します
- jQueryの拡張であるため、任意のオブジェクトで使用できます
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);
于 2009-07-17T21:13:25.320 に答える
105
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");
于 2012-08-11T14:19:24.677 に答える
47
jQuery UIのハイライト効果を使用して、同じことを実現できると思います。
于 2008-11-09T14:03:29.833 に答える
46
jQueryUIを使用している場合、pulsate関数がありますUI/Effects
$("div").click(function () {
$(this).effect("pulsate", { times:3 }, 2000);
});
于 2011-01-12T18:20:40.053 に答える
18
$('#district').css({opacity: 0});
$('#district').animate({opacity: 1}, 700 );
于 2012-10-09T20:45:48.117 に答える
16
純粋な 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)
};
上記のスクリプトは 1 秒の黄色のフェードアウトを行うだけで、要素が更新されたことなどをユーザーに知らせるのに最適です。
使用法：
flash($('#your-element'))
于 2015-03-11T06:48:02.413 に答える
14
このプラグインを使用できます（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 );
于 2008-11-09T14:14:42.867 に答える
11
次のように、反復カウントで複数のフラッシュを実行できるようにすることで、DeshengLiの方法をさらに拡張できます。
// 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
于 2012-06-15T16:06:59.993 に答える
8
本当に簡単な答えはどうですか？
$('selector').fadeTo('fast',0).fadeTo('fast',1).fadeTo('fast',0).fadeTo('fast',1)
2回点滅...それだけです！
于 2014-02-13T17:34:56.727 に答える
7
この投稿以降、物事が多少統合されているため、これはより最新の回答である可能性があり、より短いものです。jquery-ui-effect-highlightが必要です。
$("div").click(function () {
$(this).effect("highlight", {}, 3000);
});
于 2013-02-11T21:07:00.870 に答える
7
function pulse() {
$('.blink').fadeIn(300).fadeOut(500);
}
setInterval(pulse, 1000);
于 2016-07-01T02:48:42.893 に答える
7
これがまだこの質問にないなんて信じられません。あなたがしなければならないすべて：
("#someElement").show('highlight',{color: '#C8FB5E'},'fast');
これはまさにあなたがやりたいことを行い、非常に簡単で、メソッドshow()とhide()メソッドの両方で機能します。
于 2011-09-25T22:42:49.820 に答える
5
だろうパルス効果（オフライン）JQueryプラグインはあなたが探しているものに適していますか？
時間内にパルス効果を制限するための期間を追加できます。
JPがコメントで述べたように、彼の 更新されたパルスプラグインがあります。
彼のGitHubリポジトリを参照してください。そして、ここにデモがあります。
于 2008-11-09T14:03:00.303 に答える
5
これは何ヶ月も後に発見されましたが、誰かが気にかけているなら、これは何かを永続的にフラッシュするための良い方法のようです:
$( "#someDiv" ).hide();
setInterval(function(){
$( "#someDiv" ).fadeIn(1000).fadeOut(1000);
},0)
于 2013-07-22T04:51:54.950 に答える
5
この問題の解決策を探していましたが、jQuery UI に依存していませんでした。
これは私が思いついたものであり、私にとってはうまくいきます（プラグインなし、JavascriptとjQueryのみ）; -- 作業フィドルはこちら -- http://jsfiddle.net/CriddleCraddle/yYcaY/2/
CSS ファイルの現在の CSS パラメータを通常の CSS として設定し、パラメータを変更して背景色を変更するだけの新しいクラスを作成し、それを '!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.
于 2013-09-29T22:21:47.417 に答える
4
次のコードは私にとってはうまくいきます。2 つのフェードインおよびフェードアウト関数を定義し、互いのコールバックに配置します。
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);
于 2012-10-30T04:50:38.287 に答える
3
ライブラリを含めるのがやり過ぎの場合、ここに動作が保証されているソリューションがあります。
$('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 を使用して小さなアニメーション効果を作成します。
2 番目の setTimeout 内でデフォルトの背景色をリセット
いくつかのブラウザーでテストしたところ、問題なく動作します。
于 2012-06-24T01:46:34.717 に答える
3
フェードイン/フェードアウトのように、animate css/delay を使用できます
$(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);
シンプルで柔軟
于 2016-05-20T11:04:26.690 に答える
2
残念ながら、一番の答えには JQuery UI が必要です。http://api.jquery.com/animate/
これがバニラのJQueryソリューションです
JS
var flash = "<div class='flash'></div>";
$(".hello").prepend(flash);
$('.flash').show().fadeOut('slow');
CSS
.flash {
background-color: yellow;
display: none;
position: absolute;
width: 100%;
height: 100%;
}
HTML
<div class="hello">Hello World!</div>
于 2014-05-12T05:00:10.467 に答える
2
アニメーション背景バグの回避策があります。この要点には、単純なハイライト メソッドとその使用例が含まれています。
/* 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 */
于 2011-07-06T20:26:20.210 に答える
1
elem.fadeOut(10).fadeIn(10); を与えるだけです。
于 2015-02-06T08:43:10.653 に答える
1
上記のすべてからこれをまとめる - 要素をフラッシュして元の 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);
お役に立てれば！
于 2014-07-09T14:02:01.053 に答える
1
これは、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);
};
于 2011-12-23T22:49:27.977 に答える
0
それぞれに背景色を指定して、2 つのクラスを作成します。
.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();
于 2015-02-06T20:26:50.887 に答える
0
私はこれを使用しています。ただし、すべてのブラウザでまだテストされていません。これを好きなように変更するだけで、
利用方法：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 をヘッダーに追加する必要があります。
于 2011-09-21T14:17:41.630 に答える
0
jQuery 1.10.2 を使用すると、ドロップダウンが 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);
})
})
})
})
});
コールバックを介して実行 - アニメーションが失われないようにするため。
于 2015-02-03T11:25:45.447 に答える
-1
このクールなライブラリを使用して、要素にあらゆる種類のアニメーション効果を作成できます: http://daneden.github.io/animate.css/
于 2015-02-15T15:47:47.907 に答える