CODEWITHSUNDEEP
jqueryhtmlcolorsglow
herre.mann
herre.mann

Reputation: 91

How to make a div glow with jquery

I wonder how to make a div glow in a specific color when the page has loaded.

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

This is the div i want to glow. Thank you :)

Upvotes: 5

Views: 15556

Answers (3)

Suits999
Suits999

Reputation: 369

CSS3 can do that:

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

Here's a JSFiddle that shows that it does, in fact, it works fine with me, check it out to see :)

Upvotes: 8

CodeBug
CodeBug

Reputation: 11

<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>

You need to reference

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

Upvotes: 1

dev
dev

Reputation: 4009

I'm not sure how you mean to glow? If to simply change colour then you can do something like the below. 

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

You could then add some box-shadow to add a glow effect. 

-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);

Please see this example fiddle of an animating background colour and shadow added.

EDIT

Sorry I forgot to mention you'll need to include the color animation plugin to be able to do this.

Also here is another fiddle that runs after half a second and then removes the glow.... obviously this would need alot of tweaking to make it look nice.

Upvotes: 3

Related Questions