2011-08-28 7 views

risposta

31

vi consiglio di non utilizzare jQueryUI a tutti per questo - è un'animazione molto semplice e può essere fatto facilmente senza caricare UI:

// DOM ready 
$(function(){ 
    // Self-executing recursive animation 
    (function pulse(){ 
     $('#my_div').delay(200).fadeOut('slow').delay(50).fadeIn('slow',pulse); 
    })(); 
}); 

lavoro demo: http://jsfiddle.net/AlienWebguy/bSWMC/

Come si può vedere, può essere modificato abbastanza facilmente cambiando la velocità delle dissolvenze e la durata dei ritardi.

La funzione originaria jQueryUI pulsate() utilizza un ciclo for per times quindi non è possibile ottenere il risultato utilizzando questo plugin senza cambiare la logica del plugin:

$.effects.pulsate = function(o) { 
    return this.queue(function() { 
     var elem = $(this), 
      mode = $.effects.setMode(elem, o.options.mode || 'show'); 
      times = ((o.options.times || 5) * 2) - 1; 
      duration = o.duration ? o.duration/2 : $.fx.speeds._default/2, 
      isVisible = elem.is(':visible'), 
      animateTo = 0; 

     if (!isVisible) { 
      elem.css('opacity', 0).show(); 
      animateTo = 1; 
     } 

     if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) { 
      times--; 
     } 

     for (var i = 0; i < times; i++) { 
      elem.animate({ opacity: animateTo }, duration, o.options.easing); 
      animateTo = (animateTo + 1) % 2; 
     } 

     elem.animate({ opacity: animateTo }, duration, o.options.easing, function() { 
      if (animateTo == 0) { 
       elem.hide(); 
      } 
      (o.callback && o.callback.apply(this, arguments)); 
     }); 

     elem 
      .queue('fx', function() { elem.dequeue(); }) 
      .dequeue(); 
    }); 
}; 
+0

Che cosa mi consiglia? – Jordy

+1

Vedi codice aggiornato – AlienWebguy

+0

Wow, grazie. Ultima domanda, se uso l'esempio di fade-in, fade-out l'elemento scompare per alcuni millisecondi, ma tutti gli elementi sotto l'elemento dissolvenza vanno su e giù. Scusate il mio inglese ;-), quindi è possibile che l'elemento si dissolva e scomparisse senza scomparire? – Jordy

-3

Solo un'ipotesi selvaggia, ma proverei a 0 o -1. Se questo non aiuta, puoi semplicemente aggiungere un valore che è vicino a illimitato, forse 1000000 o qualcosa del genere.

10

Jordy, è possibile utilizzare il pulsate all'interno di una funzione per eseguire quanto sopra.

//the function 
function pulsateforever(){ 
$("element").effect("pulsate", { times:1 }, pulsatetime,function(){ 
//repeat after pulsating 
pulsateforever(); 
}); 
} 
//call function when DOM is ready 
$(function(){ 
pulsateforever(); 
}); 

Assicurati di sostituire elemento con l'elemento che si desidera a pulsare, e pulsatetime con la velocità con cui si desidera pulsare.

+1

+1 Questo sarà assolutamente lavorare, anche se, come ho già detto questo non dovrebbe stare usando JQueryUI - un semplice '$ ('elemento'). fadeOut ('slow'). delay (500) .fadeIn ('slow', ricorsione ..)' credo sia ottimale. – AlienWebguy

+0

Ok, quindi cosa dovrei fare? Non usi UI Pulsate ma Fade in e out? Grazie per l'aiuto;-)! – Jordy

+0

Vedere il mio post aggiornato per una spiegazione – AlienWebguy

1

verificare questa nuova plugin

Funziona come il fascino e l'effetto pulsato funziona su tutti i browser.

2

base al largo di risposta di AlienWebguy, ma senza "nascondere" e "show" ing l'elemento, invece appena animare l'opacità:

(function pulse(){ 
      $("#elem").delay(200).animate({'opacity':1}).delay(500).animate({'opacity':0},pulse); 
     })(); 
+1

questo è abbastanza bello e semplice e fa il lavoro –

Problemi correlati