0

jqueryで特定の時間帯をハイライトしたい。

例:(この行を 20 秒で強調表示)

<span> highlight me slowly by specific time</span>

window.setTimeout(function() {
    // what do i must write here?
}, 20*1000);

この結果が欲しい：

http://8pic.ir/images/sk9q76r96e3dc1rq4zo.swf

4

2 に答える 2

2

編集

この最新のJSフィドルを見てください。スパンの位置が保持されるようにコードを変更し、プラグイン http://jsfiddle.net/joevallender/9UgEF/4/に変換しました。

元の投稿

ここにあなたが始めるためのいくつかのサンプルコードがあります、あなたはここのjsfiddleでそれを見ることができますhttp://jsfiddle.net/joevallender/9UgEF/2/

HTML

<span id="test">Do you see any Teletubbies in here?</span>​

JS

$(document).ready(function(){

  var seconds = 5;
  var el = $('span#test');
  var width = el.outerWidth();
  var height = el.outerHeight();
  var wrapper = $('<div>').css({
    width: width + 'px',
    height: height + 'px',
    position: 'relative'
  });
  var background = $('<div>').css({
    width: 0,
    height: height + 'px',
    position: 'absolute',
    background: '#0f0'
  });
  wrapper.append(background);
  wrapper.append(el.css('position','absolute'));
  $('body').append(wrapper);
  background.animate({width: '+=' + width},1000*seconds);

});​

非常に多くのコードが単純なものに似ているように見えますが、デモをより厳密に模倣するために私が考えることができる最も簡単な方法でした。これを頻繁に使用する場合は、比較的簡単にjQueryプラグインに変換できますが、ネストを少し変更して、ラッパーdiv#wrapper-[spanID]などを後で使用できるようにすることもできます。

于 2012-08-25T14:08:09.747 に答える
0

タイムアウトに必要な jQuery はありません。次のように使用します。

window.setTimeout(function() {
    // specify somethingto do in this anonymous function,
    // which will be called after 20 seconds
}, 20*1000);

関数で jQuery を使用するかどうかは、あなたの選択です。

ゆっくりハイライトするには、jQuery のアニメーション キューを使用できます。これには でのタイムアウトも含まれます.delay()。

$myspan.delay(20*1000).animate({"background-color": "red"}, "slow");

.animate()メソッドのドキュメントに記載されているように、色をアニメーション化するには Color プラグインまたは jQueryUI が必要になることに注意してください。

于 2012-08-25T13:46:21.327 に答える