[RISOLTO] effetto blink con jquery per 5 volte

fradamma

Utente Attivo
28 Set 2012
93
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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

Utente Attivo
28 Set 2012
93
0
0
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:

Codice:
//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ì:

Codice:
     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!
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
HTML:
<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

Utente Attivo
28 Set 2012
93
0
0
che significa questo? non ho mai visto una cosa del genere
Codice:
.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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
Codice:
$("#blink").css({visibility:i%2==0?"hidden":"visible"});
ha lo stesso effetto che scrivere
Codice:
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

Utente Attivo
28 Set 2012
93
0
0
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! :D
 

flameseeker

Utente Attivo
27 Nov 2013
699
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Devi usare un numero dispari
Codice:
if(i==11){
   clearInterval(blink);
}
 
Discussioni simili
Autore Titolo Forum Risposte Data
L (risolto) MySQL 0
B getElementById su piu id(Risolto) Javascript 6
L Esercitarsi con Js [RISOLTO] Javascript 4
C [RISOLTO]Inserimento variabile php in input html PHP 20
L risolto visualizzazione e ordinamento dati PHP 1
moustache [RISOLTO] SQL PHP IIS PHP 8
Sergio Unia Ricezione email con destinatari multipli [Risolto] PHP 2
L update tabelle in php mysql [risolto] PHP 6
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
L [RISOLTO] Stampa a video risultato count in html PHP 13
L [RISOLTO] Eliminare una discussione creata PHP 3
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
A [PHP] Problema query insert [RISOLTO] PHP 14
B [PHP] recuperare IP dei server in load balancing [RISOLTO] PHP 3
K [RISOLTO] Problema Griglia Php+Mysql PHP 13
S [RISOLTO] aggiorna tabella da select option asp classic Classic ASP 7
elpirata [RISOLTO][Javascript] Datapicker e autocompletamento campo input Javascript 2
elpirata [RISOLTO][Mysql] Problema insert valori apostrofati MySQL 1
elpirata [RISOLTO][Mysql] Contare le occorrenze in un campo tipo varchar MySQL 2
G [MS Access] Gestione biglietti [RISOLTO] MS Access 2
G [MS Access] Casella combinata & Query [RISOLTO] MS Access 4
G [MS Access] Query mese corrente con conteggio [RISOLTO] MS Access 2
M [RISOLTO]Windows media player non mi funziona più su win 10 pro 64 bit Windows e Software 2
C [RISOLTO][PHP] Errore di sintassi PHP 8
IT9-Gpp [RISOLTO] Leggere variabile restituita da success Ajax 3
Kolop [RISOLTO][PHP] Problema Pagination PHP 2
C [RISOLTO][PHP] Funzione ONclick PHP 14
C [RISOLTO][PHP] Conteggio righe di una tabella PHP 4
N [PHP] Utilizzo variabili di sessione [Risolto] PHP 13
Tommy03 [RISOLTO][PHP] Webserver o devserver? PHP 2
Sergio Unia Recupero dati da una vecchia versione MySql [Risolto] MySQL 4
spider81man [PHP] Problemi cancellazione dato su DB [RISOLTO] PHP 1
A [RISOLTO]Inserimento Immagini da pc a MySql PHP 15
A [PHP] RISOLTO Invio Mail con Tabella PHP 2
felino Risolto - [Wordpress][WooCommerce] PayPal Checkout e campi di fatturazione WordPress 2
elpirata [PHP][RISOLTO] Sommare gli importi estratti da un ciclo while PHP 3
elpirata [PHP][RISOLTO] Effettuare la somma dei tempi di lavorazione PHP 3
elpirata [PHP] [RISOLTO]Sovrascrivere testo in una tabella PHP 2
A [RISOLTO]Recuperare dati inviati con json tramite php PHP 4
C [RISOLTO][PHP] Passaggio variabili senza refresh di pagina PHP 7
elpirata [PHP][RISOLTO] Errore di tipo Notice: Undefined index - Come risolvere quando si hanno tante var PHP 10
S Problema in PHP per invio file XML - RISOLTO- PHP 8
A [Javascript] [RISOLTO] Doppio "submit", in uno stesso "Form" , che puntino ad "action" diversi Javascript 1
marino51 [Risolto]videochat di messenger ha smesso di funzionare sul telefonino Smartphone e tablet 1
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
ken_korn [Javascript][Risolto] browser.tab.Tabs.favIconUrl non funziona Javascript 5
A [RISOLTO] HighChart e PHP PHP 4
A [RISOLTO] PHP Selezionare tutti i file con stessa estensione PHP 2
A [RISOLTO] Table elaborata da codice PHP con dati da DB non visualizzata in IFRAME PHP 15
T [Photoshop] Problema creazione pennello personalizzato [RISOLTO] Photoshop 3

Discussioni simili