Clignotant un élément. (Jquery FadeIn FadeOut?)

Question

J'ai deux divs que je veux faire clignoter en même temps jusqu'à ce que l'utilisateur passe la souris sur l'un d'entre eux.

var shouldiblink = '1';

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

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

Je vais avoir un événement de vol stationnaire qui met shouldiblink à « 0 ». Le problème est que les boucles commence dès que la page est prête et le navigateur se bloque.

Je suis coincé avec cette solution et je ne peux pas penser à une alternative en ce moment.

Pouvez-vous me aider?

Merci beaucoup.

Answer 1

Je pense que la meilleure façon sera d'utiliser setInterval et clearInterval.

Une fois que la page est chargée utilisation setInterval pour obtenir l'effet aller. Lorsque l'utilisateur passe la souris sur l'élément puis effacer l'intervalle en utilisant l'identifiant d'intervalle pour atteindre setInterval.

Voir travail démo .

Answer 2

L'une des alternatives -. Effet Pulsate de jQuery UI

L'inclure de l'API Google afin d'améliorer les performances.

---

Si vous voulez rouler votre propre solution, vous trouverez peut-être utile de vérifier code source d'effet de pulses.

Answer 3

Autant que je détestais la balise <blink>, essayez ceci:

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

Voici une solution de rechange à l'aide du rappel d'achèvement de jQuery.

Vous pouvez ajouter « sélectionné-pulses » à un élément à tout moment et appeler setPulsate (), et il va commencer pulsante. Pour effacer tous les pulsateurs actuels, vous pouvez appeler clearSelection () qui enlève juste la classe et l'oblige à cacher.

Il y a une ligne dans clearSelection () [clearTimeout ()], que je ne suis pas sûr est nécessaire. Dans mes tests extrêmement basique, cela fonctionne sans cette ligne, mais je ne suis pas certain qu'il y ait une possibilité de la minuterie peut encore être en cours d'exécution à ce que les questions de point et de cause.

Je suis pas non plus certain que vous appeliez RepeatCall () dans la fonction de rappel complet fadeOut () causerait un débordement de pile, donc je setTimeout avec une petite valeur de 10ms pour appeler à nouveau la fonction au lieu de le faire directement.

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