3

まばたきは良いことではないことはわかっています。でも...

多数の必須フィールドを含む長く複雑な HTML フォームがあります。空のテキスト ボックスを強調表示するだけでなく、質問のテキストを 3 秒間点滅させて、それらに注意を向けたいと思います。

私が見つけることができるすべてのjavascript / cssメソッドは、点滅するアイテムが複数ある場合、またはアイテムを常に点滅させたままにするように設計されている場合に失敗するようです。

これを達成する方法について何か提案はありますか?

Web ページで点滅するテキストの代わりになる方法は? やり過ぎのようです。

ありがとう

デレク

私はこれを試しました（指定された各スパンをわずか3秒で点滅させます）が、呼び出された最初のアイテムでのみ機能します：

function blinkOn(span){
    span.counter=0;
    span.defColor=span.style.color;
    span.alertTimerId =setInterval("blinkOnce('"+span.id+"')", 400 );
}

function blinkOnce(spanID){
    var span=document.getElementById(spanID)
    span.counter++;
    if(span.style.color==span.defColor){
        span.style.color='transparent'}
     else{
        span.style.color=span.defColor;
     }
    if(span.counter>8){
        blinkOff(span);
    }   
}

function blinkOff(span){
   clearInterval(span.alertTimerId);    
   span.style.color=span.defColor;
}
4

2 に答える 2

12

私は個人的にこの種のことのためにjQueryを使用しています：

$('#element_id')
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300)
    .fadeOut(300)
    .fadeIn(300);

私が知っている非常にエレガントではありませんが、それは仕事をします。jQuery UIには、さらに簡潔な効果があります。

私が使用する唯一の場所は、ユーザーがバスケットページにリダイレクトせずに買い物かごに何かを追加したときに、それが追加されたことを確認するためです。

参照： http ： //api.jquery.com/fadeIn/、http：//api.jquery.com/fadeOut/およびhttp://jqueryui.com/docs/show/（特に脈動）

于 2011-02-02T17:11:32.510 に答える
4

あなたが望む動作については正確にはわかりませんが、Javascript タイマーを使用して質問をフラッシュする (または何らかのアクションを実行する) ことができるようです。フラッシュする要素ごとに固有のタイマーを作成できます。そして、それらを 1 回点滅させることも、無限または制限まで繰り返すように設定することもできます。一例を次に示します: http://www.elated.com/articles/javascript-timers-with-settimeout-and-setinterval/

私は今朝これを解決するのに少し時間がかかりました。まだ動作していない場合は、これを適応させて役立つことを願っています.

<html>
  <head>
    <script type="text/javascript">
      var idArray = [];
      var defaultColor = '#000000';

      function makeItemsBlink(blinkTime) {
        blinkForTime('q1', blinkTime, '#ff0000');
        blinkForTime('q2', blinkTime, '#00ff00');
        blinkForTime('q3', blinkTime, '#0000ff');
      }

      function blinkForTime(id, blinkTime, blinkColor) {
        idArray[id] = setInterval('toggleColor("' + id + '", "' + blinkColor + '")', 400);
        setTimeout('stopBlinking("' + id + '")', blinkTime);
      }

      function stopBlinking(id) {
        clearInterval(idArray[id]);
        document.getElementById(id).style.color = defaultColor;
      }

      function toggleColor(id, blinkColor) {
        var e = document.getElementById(id);
        var currentColor = e.style.color;
        if (currentColor == defaultColor) {
          e.style.color = blinkColor;
        }
        else {
          e.style.color = defaultColor;
        }
      }
    </script>
  </head>
  <body onload="makeItemsBlink(3000);">
    <div id="q1">Test question 1</div>
    <div id="q2">Test question 2</div>
    <div id="q3">Test question 3</div>
  </body>
</html>
于 2011-02-02T17:14:50.387 に答える