Lampeggiante un elemento. (Jquery FadeIn FadeOut?)

Question

Ho due div che voglio fare lampeggiare allo stesso tempo fino a quando l'utente passa il mouse su uno di essi.

var shouldiblink = '1';

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

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

L'avrò un evento hover che imposta shouldiblink a '0'. Il problema è che i loop inizia non appena la pagina è pronta e il browser si blocca.

Sono bloccato con questa soluzione e non riesco a pensare a un'alternativa al momento.

Mi potete aiutare?

La ringrazio molto.

Answer 1

Credo che il modo migliore sarà quello di utilizzare setInterval e clearInterval.

Una volta che la pagina viene caricata uso setInterval per ottenere l'effetto di andare. Quando l'utente passa il mouse sull'elemento quindi cancellare l'intervallo utilizzando l'id intervallo raggiunta durante setInterval.

Vedere un lavoro .

Answer 2

Una delle alternative -. Effetti Pulsate da jQuery UI

Includere da Google API al fine di migliorare le prestazioni.

---

Se si desidera ripristinare la propria soluzione, si potrebbe trovare utile check-out codice sorgente dell'effetto pulsate.

Answer 3

Per quanto ho odiato il tag <blink>, provate questo:

$.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

Ecco una soluzione alternativa usando il callback jQuery completamento.

È possibile aggiungere 'selezionata-pulsate' ad un elemento in qualsiasi momento e chiamare setPulsate (), ed inizierà a pulsare. Per cancellare tutti i pulsatori attuali è possibile chiamare clearSelection (), che rimuove solo la classe e costringe a essere nascosto.

C'è una linea in clearSelection () [clearTimeout ()], che non sono sicuro che è necessario. Nel mio test estremamente semplice, funziona senza quella linea, ma non sono sicuro se v'è la possibilità che il timer potrebbe essere ancora in esecuzione a che le questioni di punto e la causa.

Non ero anche certo se chiama RepeatCall () all'interno del fadeOut () di callback completa causerebbe un overflow dello stack, quindi ho usato setTimeout con un piccolo valore 10msec per richiamare di nuovo la funzione, invece di farlo direttamente.

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);
            });
        });
    }
}