Piscando um item. (JQuery Fadein Fadeout?)

Question

Eu tenho duas divs que quero fazer piscar ao mesmo tempo até que o usuário paira o mouse em um deles.

var shouldiblink = '1';

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

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

O evento que eu terei um mouse que define oblink para '0'. O problema é que os loops iniciam assim que a página estiver pronta e o navegador trava.

Estou preso a esta solução e não consigo pensar em uma alternativa agora.

Pode me ajudar?

Muito obrigado.

Answer 1

Eu acho que a melhor maneira será usar o SetInterval e o ClearInterval.

Depois que a página for carregada, use o SetInterval para obter o efeito. Quando o usuário paira o mouse sobre o elemento, limpe o intervalo usando o ID do intervalo atingido para o SetInterval.

Ver um Demoção de trabalho.

Answer 2

Uma das alternativas - Pulsate efeito de JQuery UI.

Inclua -o na API do Google para melhorar o desempenho.

---

Se você quiser rolar sua própria solução, pode achar útil verificar Código fonte de efeito pulsado.

Answer 3

Por mais que eu odiei o <blink> Tag, tente isto:

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

Aqui está uma solução alternativa usando o retorno de chamada de conclusão do jQuery.

Você pode adicionar 'selecionado' a um elemento a qualquer momento e chamar setPulsate (), e ele começará a pulsação. Para limpar todos os pulsadores atuais, você pode chamar ClearSelection (), que apenas remove a classe e força a ser oculta.

Há uma linha em clearselection () [cleartimeout ()], que não tenho certeza se é necessário. Nos meus testes extremamente básicos, ele funciona sem essa linha, mas não tenho certeza se existe a possibilidade de o cronômetro ainda estar em execução nesse ponto e causar problemas.

Eu também não tinha certeza de que a chamada de repetição () dentro do retorno de chamada Fadeout () causaria um estouro de pilha, então usei o setTimeout com um pequeno valor de 10mec para chamar a função novamente em vez de fazê -la diretamente.

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