n° 219
Novembre 2017
Dicembre 13, 2017, 01:47:18 *
Benvenuto! Accedi o registrati.
Hai dimenticato l'e-mail di attivazione?

Accesso con nome utente, password e durata della sessione
Notizia:
 
   Indice   Linux Windows Techassistance Gameassistance videogame hardware Aiuto Ricerca Agenda Downloads Accedi Registrati  


* Messaggi recenti
Messaggi recenti
Pagine: [1]   Vai giù
  Stampa  
Autore Discussione: Box-shadow animate  (Letto 4010 volte)
0 utenti e 1 Utente non registrato stanno visualizzando questa discussione.
caramellaman
Newbie
*

Karma: +0/-1
Scollegato Scollegato

Messaggi: 14


Mostra profilo E-mail
« inserita:: Novembre 04, 2012, 06:42:37 »

Ciao Ragazzi! Sono nuovo, e mi sono iscritti per porvi una questione che mi sta facendo scervellare!!
Vengo subito al sodo: ho un div#mioDiv, con questi css
#mioDiv {
background-color: black;
widht: 300px;
[...]
}

io vorrei che, al click su questo div, venga applicata questa classe:

.classe {
box-shadow: 0px 0px 20px red inset;
}
che rende il blocco (#mioDiv) un aspetto un pò "halloween"  Ghigno

Per fare il toggle al click non c'è nessun problema, ci pensa jQuery. Io però vorrei che la classe non venisse applicata "di brutto", di colpo, in un istante, ma venisse applicata con un effetto graduale, in modo molto più bello! Ci ho provato in tutte le salse, anche con .animate di jQuery, ma niente!

Spero possiate aiutarmi, Mirco.
Registrato
bertolottipf
Full Member
***

Karma: +4/-7
Scollegato Scollegato

Messaggi: 443


Mostra profilo E-mail
« Risposta #1 inserita:: Novembre 04, 2012, 08:14:08 »

Usando un fadein su un div nascosco del tipo div#shadow... ?
Registrato
alex.75
invioattach
Full Member
***

Karma: +14/-4
Scollegato Scollegato

Messaggi: 357



Mostra profilo WWW
« Risposta #2 inserita:: Novembre 04, 2012, 08:18:13 »

  
Codice:
<script type="text/javascript">                  

        var halloween_shadow_max_blur = 20;  // 20-30 px
        var blur = 0;
        var $obj = null;        

        function halloween() {
            if (blur < halloween_shadow_max_blur)
            {
                blur++;
                $obj.css('box-shadow', '0px 0px ' + blur + 'px red inset');
                setTimeout('halloween();', 0.5*1000); // 0.3-0.5 seconds
            }
        }      
        
        $(function () {
            $('#mioDiv').click(function(){
                $obj = $(this);
                halloween();
            });
        });

    </script>

É veramente grezzo ma fa quello che chiedi.
La grossa pecca è che non sia dinamico, ovvero la funzione halloween agisce sempre e solo su un elemento. Si potrebbe usare un array e chiamare la funzione per tutti gli elementi halloween-enabled, con $('.halloween-enable').click(...).

In teoria dovrebbe bastare il solo
Codice:
$('#mioDiv').animate({'boxShadow':'[box-shadow value]'}, [seconds]*1000)

ma .animate non mi funziona nemmeno per la proprietà color, e non capisco il perché.
(vedi allegato)

ciao
Registrato
caramellaman
Newbie
*

Karma: +0/-1
Scollegato Scollegato

Messaggi: 14


Mostra profilo E-mail
« Risposta #3 inserita:: Novembre 05, 2012, 11:00:09 »

Grazie mille!! Ho fatto due modifiche ed è proprio quello che volevo!   Sorriso  Sorriso  Sorriso
Registrato
Pagine: [1]   Vai su
  Stampa  
 
Vai a:  

Copyright © 2017 Edizioni Master SpA. p.iva : 02105820787

Tutti i diritti di proprietà letteraria e artistica riservati. - Privacy



powered by Simple Machines