sam sam - 3 months ago 24
HTML Question

Pulse effect with CSS box-shadow by using jQuery

I am trying to create pulse effect with css box-shadow by using jquery. I tried following code but completely failed. What i am trying to achieve is a smooth pulse effect with box-shadow

The code that i tried is
html

<div class="one">
</div>


css

.one {
width: 100px;
height: 100px;
background: red;
-webkit-box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.two {
width: 100px;
height: 100px;
background: red;
-webkit-box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);
}


jquery

$("div").setInterval(function() {
$(this).toggleClass(".two");
}, 1000);


fiddle http://jsfiddle.net/KXp4D/2/

Answer

setInterval() is not a jQuery function, but a simple JavaScript one.

To use it, you need to change your code to

setInterval(function() {
   $("div").toggleClass("two");
}, 1000);

This will work, but like an on-off; to make it smooth, you can use CSS3 transition like this:

transition: all 1s ease;

Demo

Note that you won't need necessary javascript, this can be done in pure CSS3.