項目を点滅。 （jQueryのフェードインフェードアウト？）

Question

私は、ユーザーがそれらのいずれかにマウスを置いまで同時に点滅を作りたい2つのdivを持っています。

var shouldiblink = '1';

function mrBlinko(divid){
 while (shouldiblink =='1') {
 $("#"+divid).fadeIn(100).fadeOut(300);
}

$(document).ready(function(){
 mrBlinko("mydiv1");
 mrBlinko("mydiv2");
}

私は「0」に設定しますshouldiblinkホバーイベントがあるでしょう。問題は、ページの準備ができているとブラウザがクラッシュしたとしてループは、すぐに開始することです。

私は、このソリューションで立ち往生していると私は今、代替を考えることはできません。

あなたは私を助けることはできますか？

どうもありがとうございます。

Answer 1

私はもっと良い方法がするsetIntervalとてclearIntervalを使用するようになると思います。

ページに行く効果を得るために使用したsetIntervalをロードされると。ユーザが要素の上にマウスを置いたときに、その後のsetIntervalため達成間隔IDを使用して間隔をクリアします。

の 作業のデモを参照してくださいする の。

Answer 2

の選択肢の一つ - 。からPulsate効果のjQuery UI の

のパフォーマンスを向上させるために、GoogleのAPIからそれを含めます。

<時間>

あなたが独自のソリューションを展開する場合は、チェックアウト役立つかもしれない<のhref =「http://jquery-ui.googlecode.com/svn/tags/latest/ui/jquery-ui.js」のrel = "nofollowをnoreferrer">脈動効果のソースコードする。

Answer 3

私は<blink>タグを嫌っな限り、これを試してください：

$.fn.blink = function(opts) {
   // allows $elem.blink('stop');
   if (opts == 'stop') {
     // sets 'blinkStop' on element to true, stops animations, 
     // and shows the element.  Return this for chaining.
     return this.data('blinkStop', true).stop(true, true).show();
   }

   // we aren't stopping, so lets set the blinkStop to false,
   this.data('blinkStop', false);

   // load up some default options, and allow overriding them:
   opts = $.extend({}, {
     fadeIn: 100,
     fadeOut: 300
   }, opts || {} );

   function doFadeOut($elem) {
     $elem = $elem || $(this); // so it can be called as a callback too
     if ($elem.data('blinkStop')) return;
     $elem.fadeOut(opts.fadeOut, doFadeIn);
   }
   function doFadeIn($elem) {
     $elem = $elem || $(this);
     if ($elem.data('blinkStop')) return;
     $elem.fadeIn(opts.fadeIn, doFadeOut);
   }
   doFadeOut(this);
   return this;
 };

 // example usage - blink all links until you mouseover:
 // takes advantage of the jQuery.one() function so that it only calls the 
 // stop blink once
 $('a').blink({fadeIn: 500, fadeOut: 1500}).one('mouseover', function() { 
   $(this).blink('stop') 
 });

 // 30 seconds after we started blinking, stop blinking every element we started:
 setTimeout(function() { 
   $('a').blink('stop');
 }, 30000);

 // example that should do what you wanted:
 $("#mydiv1,#mydiv2").blink().one('mouseover', function() {
   $(this).blink('stop');
 });

Answer 4

ここでのjQueryの完了コールバックを使用して、代替ソリューションである。

は、いつでも要素に「が選択-脈動」を追加し、setPulsate（）を呼び出し、それが脈動を開始しますすることができます。現在のすべてのパルセーターをクリアするにはあなただけのクラスを削除し、非表示にするためにそれを強制clearSelection（）を呼び出すことができます。

私は必要があるか分からないclearSelectionの行（）[てclearTimeoutは（）]、があります。私の非常に基本的なテストでは、それは、その行せずに動作しますが、私はタイマーがまだその時点で実行されていると問題が発生することができる可能性があるかどうかを確認していない。

私はまた、フェードアウト内RepeatCall（）（）の完全なコールバックを呼び出すと、スタックオーバーフローを引き起こすかどうか特定できなかったので、私はそれを直接行うのではなく、もう一度関数を呼び出すために10ミリ秒の小さな値とのsetTimeoutを使用します。

var currentPulsatorId = -1;

function clearSelection() {
    if (currentPulsatorId != -1) {
        clearTimeout(currentPulsatorId); /* needed? */
        currentPulsatorId = -1;
    }

    var curElems = $('.selected-pulsate');
    $(curElems).removeClass('selected-pulsate');
    $(curElems).hide();
}

function setSelection(elems) {
    $(elems).addClass('selected-pulsate');
    setPulsate();
}

function setPulsate() {
    // trigger
    RepeatCall();

    function RepeatCall()
    {
        $('.selected-pulsate').fadeIn(400, function() {
            $('.selected-pulsate').fadeOut(400, function() {
                // set timeout quickly again
                // call externally to avoid stack overflow
                currentPulsatorId = setTimeout(RepeatCall, 10);
            });
        });
    }
}