私は、ユーザーが新しいグラフィカルコントロールをDOMに追加できるWebページ(jqueryを使用)を開発しています(たとえば、ユーザーがリンクをクリックして新しいDIVが作成された場合など)。この新しい要素の背景色を数秒間変更するにはどうしたらいいですか?そして元の色に戻りますか?色を変更して、新しい要素の位置についてユーザーに視覚的なインジケーターを与えたいと思います。DOMに追加された新しい要素の背景色を一時的に変更するにはどうすればよいですか?
ありがとうございました。
私は、ユーザーが新しいグラフィカルコントロールをDOMに追加できるWebページ(jqueryを使用)を開発しています(たとえば、ユーザーがリンクをクリックして新しいDIVが作成された場合など)。この新しい要素の背景色を数秒間変更するにはどうしたらいいですか?そして元の色に戻りますか?色を変更して、新しい要素の位置についてユーザーに視覚的なインジケーターを与えたいと思います。DOMに追加された新しい要素の背景色を一時的に変更するにはどうすればよいですか?
ありがとうございました。
jQuery,MooTools、およびPrototypeのように、これを(多くの他の印象的なグラフィック効果を含む)たくさんのライブラリがあります。たとえば、jQueryを使用してこのエフェクトをオフにする方法については、this StackOverflow questionを参照してください。
もっと一般的には、JavascriptのsetTimeout
メソッドを使用してしばらく要素の色を設定してから、タイムアウトが実行されたら、元の色に戻します。これは、プラグインを使用せずにこれを行うための最も簡単な解決策のように見えます
は'Highlight' featureのjQueryのUIを使用することです。
ここでは、jQuery.animate()を使用した例を示します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 300px;
height: 300px;
border: solid #000 1px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function() {
$("div").click(function() {
$("<span>Hello there!</span>").appendTo(this)
.animate({
opacity: 0
}, 500, function() {
$(this).animate({
opacity: 1,
}, 500);
});
});
});
</script>
</head>
<body>
<div></div>
</body>
</html>
:それは色が、不透明度を使用していません