jQueryUIのオーバヘッドなしで要素をフラッシュしますか？

私は、jQueryで要素を "フラッシュ"にする方法についてthis questionを読んでいましたが、最も一般的な回答はjQueryUIに依存していました。 jQueryUIを使わずに同様の方法で要素の背景色をフラッシュする方法はありますか？jQueryUIのオーバヘッドなしで要素をフラッシュしますか？

出典

2011-10-21 Ivan

この "フラッシュ" を達成するために、あなただけのUIエフェクトコアおよびUI効果を必要とします。この理由からjQuery UIは使用されるように設計されているため、使用していないウィジェットのコードはすべて必要ありません。 – gnarf

各サイクルで少しの遅延を伴うforループを含む関数を書くことができます。ループの各サイクルで、色の値を増減して背景として設定することができます。これにより、アニメーションと同じ効果が得られます。

出典

2011-10-21 18:45:38

遅延を行うにはsetInterval（）またはsetTimeout（）を使用する必要があります。 UIをブロックしないようにします。 – JeffSahol

-2

そのページの回答を調べると、jQuery workaroundへのリンクがあり、jQuery要素の.highlight()という関数を呼び出すことができます。 jQueryは必要ですが、jQueryUIは必要ありません。

出典

2011-10-21 18:49:08 Ivan

これがあなた自身の質問に答えるなら、あなたはまだそのようにマークすることができます。また、jquery uiが "effects.js"のリレーを使ってその作業を行うと思います。 jqueryがその上でそれをしなかった場合、あなたはエフェクトを見るかもしれません。 – Eonasdan

このようなものはうまくいくはずです（私は願っています）。

function flash($element, times) { 
    var colors = ['#fff', '#000']; 
    $element.css('background-color', colors[times % colors.length]); 
    if (times === 0) return; 
    setTimeout(function() { 
    flash($element, times - 1); 
    }, 500); 
}

このような要素にそれを使用します。flash($('#some_element'), 5)

出典

2011-10-21 18:50:01 Znarkus

一つの方法：

setInterval(function(){ 
    $('#hello').css('background-color', 'red'); 
}, 100); 

setInterval(function(){ 
    $('#hello').css('background-color', 'green'); 
}, 150);

DEMO

出典

2011-10-21 18:55:19 Sarfraz

悪い方法。これらの2つの間隔は、互いに容易に同期しなくなります。ブール値などを使ってエフェクトを切り替えるだけの方が良いでしょう。 – Clox

jQueryUIのオーバヘッドなしで要素をフラッシュしますか？

答えて

関連する問題