Jquery Opacity Fade In Out Loop

Question

Uno dei miei clienti mi ha chiesto di fare un effetto lampeggiante su un div. Penso che potrebbe non essere la cosa migliore per lui, forse la luce che si dissolve dentro e fuori opacità attirerà l'attenzione dei suoi clienti, senza infastidirli.

Al momento ho

<a class="special_button" href="#">Special Offers &rsaquo;</a> 

Ho il seguente codice per un altro div, che provoca una dissolvenza in su carico del browser:

$('.logo-top').delay(700).animate({ 
    'opacity' : '1',   
    'top' : '+=40px' 
}, { duration: 700, easing: 'swing' }); 

Come farei qualcosa di simile per la special_button, ma invece looping l'opacità? Da dire 80 a 100?

Sarebbe ancora meglio se in loop una certa quantità di volte, forse come 5.

migliore, Stepan

Answer 1

Probabilmente vuole avere qualcosa di simile jsFiddle.

E si può anche indicare il numero di volte che si desidera che questo lampeggi, semplicemente mantenendo un contatore.

Codice da jsFiddle:

$(document).ready(function() { 
    function runIt() {   
     var baloon = $('#baloon'); 
     baloon.animate({opacity:'1'}, 1000); 
     baloon.animate({opacity:'0.5'}, 1000, runIt); 
    } 
    runIt(); 
}); 

Answer 2

si può fare in questo modo;

(function() { 
    var cnt = 0; 
    var specials = $(".special_button"); 

    function next() { 
     if (cnt < 5) { 
      specials.fadeTo(2000, .1).fadeTo(2000, 1, next); 
      ++cnt; 
     }      
    } 

    next(); 
})(); 
​ 

demo di lavoro: http://jsfiddle.net/jfriend00/558GY/

Cordiali saluti, la differenza tra il 80% e il 100% di opacità è piuttosto sottile. Ho fatto la differenza molto più nella demo. Puoi ovviamente sintonizzarti su qualunque effetto tu voglia.

Answer 3

Per quanto ho capito si desidera qualcosa di lampeggiante qui i suoi:

$("document").ready(function() { 
    anm(".special_button"); 
}); 
function anm(element) { 
    $(element).delay(200).animate({ opacity: 'toggle' }, 1000, function() { anm(element); }); 
} 

demo: http://jsfiddle.net/BerkerYuceer/GdcRs/

Answer 4

Perché non usare i fotogrammi chiave CSS3?

.twinkle { 
 
    background: red; 
 
    padding: 0.2em; 
 
    margin: 50px; 
 
} 
 

 
@-webkit-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-moz-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@-ms-keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
@keyframes twinkly { 
 
    from {opacity: 1;} 
 
    to {opacity: 0.4;} 
 
} 
 

 
.twinkle { 
 
    -webkit-animation: twinkly 1s alternate infinite; 
 
    -moz-animation: twinkly 1s alternate infinite; 
 
    -ms-animation: twinkly 1s alternate infinite; 
 
    animation: twinkly 1s alternate infinite; 
 
}

<span class="twinkle">Special Offers &rsaquo;</span>

è possibile utilizzare un ripiego per i browser più vecchi allora. Qualunque script l'altro è buono, ma consiglierei la soluzione di Ulan.

Answer 5

se si preferisce il codice funzione, utilizzare lo plugin jquery-timing per le tempistiche in jQuery. Si restringe il codice completo:

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$); 

Oh, e quando si vuole alternare un determinato numero di volte (ad esempio 20), quindi si scrive

$('#baloon').repeat().fadeTo(1000,1).fadeTo(1000,0.5,$).until(20); 

fresco, eh?