Parpadear un elemento. (Jquery FadeIn FadeOut?)

Question

Tengo dos divs que yo quiero hacer un abrir y cerrar al mismo tiempo hasta que el usuario pasa el ratón sobre uno de ellos.

var shouldiblink = '1';

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

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

La voy a tener un evento vuelo estacionario que establece shouldiblink a '0'. El problema es que los bucles se inicia tan pronto como la página está lista y el navegador se bloquea.

estoy atascado con esta solución y no puedo pensar en una alternativa en este momento.

¿Me puede ayudar?

Muchas gracias.

Answer 1

Creo que la mejor manera será utilizar setInterval y clearInterval.

Una vez que la página se carga el uso setInterval para conseguir el efecto de ir. Cuando el usuario pasa el puntero del ratón sobre el elemento a continuación borrar el intervalo utilizando el ID de intervalo alcanzado para setInterval.

Vea una de trabajo .

Answer 2

Una de las alternativas -. Pulsate efecto de jQuery UI

Incluir desde Google API con el fin de mejorar el rendimiento.

---

Si desea rodar su propia solución, le puede resultar útil revisar código fuente de efecto pulsate.

Answer 3

Por mucho que odiaba la etiqueta <blink>, intente lo siguiente:

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

Aquí es una solución alternativa usando la devolución de llamada terminación de jQuery.

Puede añadir '-pulsate seleccionado' a un elemento en cualquier momento y llamar setPulsate (), y comenzará pulsante. Para borrar todos los pulsadores actuales se puede llamar clearSelection (), que sólo elimina la clase y la obliga a estar oculto.

Hay una línea en clearSelection () [clearTimeout ()], que no estoy seguro es necesario. En mis pruebas extremadamente básico, funciona sin esa línea, pero no estoy seguro de si hay una posibilidad de que el temporizador todavía puede estar funcionando a que los problemas de punto y causa.

Además, no estaba seguro de si llamar RepeatCall () dentro de la fadeOut () de devolución de llamada completa provocaría un desbordamiento de pila, por lo que utiliza setTimeout con un pequeño valor de 10 ms a llamar a la función de nuevo en lugar de hacerlo directamente.

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