Einen Gegenstand blinken. (JQuery Fadein Fadeout?)

Question

Ich habe zwei Divs, die ich gleichzeitig blinken möchte, bis der Benutzer die Maus auf einem von ihnen hob.

var shouldiblink = '1';

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

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

Ich werde ein Schwebereignis haben, das sich auf '0' setzt. Das Problem ist, dass die Loops beginnt, sobald die Seite fertig ist und der Browser abstürzt.

Ich bin mit dieser Lösung festgefahren und kann mir momentan keine Alternative vorstellen.

Kannst du mir helfen?

Vielen Dank.

Answer 1

Ich denke, der bessere Weg wird es sein, SetInterval und ClearInterval zu verwenden.

Sobald die Seite geladen ist, verwenden Sie SetInterval, um den Effekt in Gang zu bringen. Wenn der Benutzer die Maus über das Element hob, lösten Sie das Intervall mit der für SetInterval erreichten Intervall -ID.

Ein ... sehen Arbeitsdemo.

Answer 2

Eine der Alternativen - Pulsate Effekt von JQuery UI.

Fügen Sie es von Google API ein, um die Leistung zu verbessern.

---

Wenn Sie Ihre eigene Lösung rollen möchten, finden Sie möglicherweise nützliche Überprüfung Quellcode pulser Wirkung.

Answer 3

So sehr ich das hasste <blink> Tag, versuchen Sie es mit:

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

Hier finden Sie eine alternative Lösung mit dem Completion -Rückruf von JQuery.

Sie können jederzeit zu einem Element 'ausgewähltes Pulsat' hinzufügen und Setpulsat () aufrufen, und es beginnt pulsierend. Um alle aktuellen Pulsatoren zu löschen, können Sie ClearSelection () nennen, was die Klasse nur beseitigt und zwingt, versteckt zu werden.

Es gibt eine Linie in ClearSelection () [Clearimeout ()], die ich nicht sicher bin, dass es notwendig ist. Bei meinen extrem grundlegenden Tests funktioniert es ohne diese Zeile, aber ich bin mir nicht sicher, ob es eine Möglichkeit gibt, dass der Timer möglicherweise noch zu diesem Zeitpunkt läuft und Probleme verursacht.

Ich war mir auch nicht sicher, ob das Aufrufen von Repeatcall () innerhalb des Fadeout () Complete Callback einen Stapelüberlauf verursachen würde. Daher habe ich SetTimeout mit einem geringen Wert von 10 msec verwendet, um die Funktion erneut aufzurufen, anstatt sie direkt zu erledigen.

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