2013-03-17 17 views
5

Mi chiedo come fare un bagliore div in un colore specifico quando la pagina è stata caricata.Come rendere un bagli div con jquery

<div id="glow" class="logo registrer"><a href="http://henricson.net/registrer.php" class="understrek">Registrer deg</a></div> 

Questo è il div che voglio illuminare. Grazie :)

+0

Cosa intendi per * bagliore *? Puoi pubblicare il codice che hai provato nei tuoi tentativi di risolvere questo? –

+2

Guarda [Effetti JQuery] (http://jqueryui.com/effect/) – Jon

risposta

7

CSS3 può farlo:

-webkit-box-shadow:0 0 20px blue; 
-moz-box-shadow: 0 0 20px blue; 
box-shadow:0 0 20px blue; 

Ecco un JSFiddle che dimostra che lo fa, infatti, funziona bene con me, check it out per vedere :)

+0

Esattamente quello che stavo cercando! Grazie! :) – user1888043

+0

il benvenuto :) – Suits999

3

Non sono sicuro di come intendi brillare? Se semplicemente cambia colore, puoi fare qualcosa come il seguente.

$(document).ready(function(){ 
    $('#glow').animate({backgroundColor:'green'}); 
}); 

Si potrebbe poi aggiungere un po box-shadow per aggiungere un effetto di bagliore.

-webkit-box-shadow: 0px 0px 5px 5px rgba(0, 150, 0, 0.3); 
box-shadow: 0px 0px 5px 5px rgba(0, 150, 0, 0.3); 

Si prega di vedere questo esempio fiddle di un colore di sfondo animazione e ombra aggiunto.

EDIT

Scusa se ho dimenticato di dire è necessario includere il color animation plugin per essere in grado di farlo.

Anche qui c'è un altro fiddle che viene eseguito dopo mezzo secondo e quindi rimuove il bagliore .... ovviamente questo avrebbe bisogno di un sacco di ritocchi per farlo sembrare bello.

1
<div class="col-md-6 col-md-offset-3" id="notificationmain"> 
    <div class="sub"><blockquote id="notification" class="alert alert-success" glowing="0">User Has been created</blockquote></div> 

    <script> 
     $(document).ready(function() { 
      setTimeout(function() { $('.sub blockquote').glow('#FFFFDD', 800); }, 100); 
     }); 
    </script> 
</div> 

È necessario riferimento

<script src="~/Scripts/jquery.glow.js"></script>