[RISOLTO] effetto blink con jquery per 5 volte

[fradamma]

Ciao a tutti, il mio problema è questo:
ho un immagine che con una chiamata ajax viene inserita in un <li> come background in base ad una classe. Devo dare un effetto blink all'immagine caricata affinchè lampeggi 5 volte prima di fissarsi. Come posso farE? da dove posso partire?
Grazie a tutti e buon venerdi!

 

[criric]

Ciao

da dove posso partire?

puoi usare setInterval() per richiamare una funzione che reimposta la proprietà css visibilty: visible / hidden, crei un contatore e a 5 usi clearInterval() per bloccare limmagine

 

[fradamma]

Ciao

puoi usare setInterval() per richiamare una funzione che reimposta la proprietà css visibilty: visible / hidden, crei un contatore e a 5 usi clearInterval() per bloccare limmagine

Ciao Criric.
Ho provato a fare questo:

//setInterval( blinkFunction, 3000);
$(document).ready(

    function blinkFunction() {
        for(var i=0; i<=5; i++) {
           $("ul li img").toggle(
            function () {
                $("ul li img").css("visibility", "hidden");
                $("ul li img").css("visibility", "visible");
            });
        }
    }

//clearInterval(blinkFunction);


);

In realtà però non credo mi serva un setInterval. Nel mio esempio blinkFunction() è lanciata al document.ready, io dovrei passarla all'interno della funzione che mi renderizza il dato dell'immagine, così:

     function stampaImmagineinUl() {
           //qui il codice che con l'$.each mi prende le immagini del json e me le mette in un <ul><li></li></ul>
          blinkFunction()
     }

tu che dici, può andare? puoi vedere il mio esempio qui http://jsfiddle.net/7nVf3/7/
Tu faresti in modo diverso?

Ps non capisco perchè pur essendo impostato un ciclo con 1<5 mi lampeggia l immagine solo 3 volte!

 

[fradamma]

ops...volevo scrivere "i<5" e non 1<5

 

[criric]

lo vedi solo 3 volte perchè le altre 2 è invisibile, puoi aumentare il ciclo fino a 9
io pensavo di usare setInterval in questo modo

<script type="text/javascript">
    $(document).ready(function(){
        var i = 0;
        var blink = setInterval(function(){
            i++;
            $("#blink").css({visibility:i%2==0?"hidden":"visible"});
            if(i==9){
                clearInterval(blink);
            }
        },1000);
    })
</script>
<img id="blink" src="http://upload.wikimedia.org/wikipedia/it/4/4a/Pallone_pallanuoto.png" alt="img"/>

 

[fradamma]

che significa questo? non ho mai visto una cosa del genere

.css({visibility:i%2==0?"hidden":"visible"});

Effettivamente col tuo metodo si vede proprio l'effetto lampeggiante, però ora il problema è che sparisce l immagine, in realtà dovrebbe fissarsi... vedi qui

PS non ho capito perchè è necessario mettere come valore "9"

 

[criric]

PS non ho capito perchè è necessario mettere come valore "9"

è necessario mettere un numero dispari per finire con l'immagine visibile
0 hidden
1 visible
2 hidden
3 visible
etc

$("#blink").css({visibility:i%2==0?"hidden":"visible"});

ha lo stesso effetto che scrivere

var visible;    
    if(i%2==0) {
        visible = "hidden";
    }else{
        visible = "visible";
    }
    $("#blink").css({visibility:visible});

ma è tutto su una riga, mi pare si chiami operatore ternario

 

[fradamma]

ahhh ok ok...credo di aver capito....ma come faccio a bloccare l immagine? in realtà deve essere visibile e non sparire.
Grazie Criric! sei un grande!

 

[flameseeker]

ma come faccio a bloccare l immagine? in realtà deve essere visibile e non sparire.

Basta che invece di usare l'attributo visible, utilizzi l'opacity e invece di variare tra "hidden" e "visible" lo fai variare tra 0.3 e 0.7
Nel momento in cui raggiungi l'ultimo giro ed esegui il clearInterval, setti nuovamente l'opacity ad 1.

 

[criric]

Devi usare un numero dispari

if(i==11){
   clearInterval(blink);
}

 

[fradamma]

Ottimo!!!! grazie un mondo!