Pulse effect with CSS box-shadow by using jQuery

Question

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 1

Pure CSS Example JSFIDDLE

@-webkit-keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@-moz-keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}
@keyframes shadow {
    0% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
    50% {box-shadow: -1px -1px 13px rgba(50, 50, 50, 0.75);}
    100% {box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);}
}

.one {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: red;
    box-shadow: -1px -1px 5px rgba(50, 50, 50, 0.75);
}
.one:hover {
    -webkit-animation: shadow 1s ease-in-out infinite;
    -moz-animation: shadow 1s ease-in-out infinite;
    animation: shadow 1s ease-in-out infinite;
}

Answer 2

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.

Answer 3

setInterval(function() {
   var cl = $("div").hasClass('one') ? 'two' : 'one';
   $("div").attr('class', cl);
}, 1000);

You cannot add setInterval to an object. Use it like

setInterval(function(){
  // do stuff
}, 1000);

FIDDLE

NOTE: For that smooth transition I added CSS transition on box-shadow

Answer 4

In the Fiddle your setInterval method is not running correctly and the toggle doesn't have the correct args. Try this instead:

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

Answer 5

Here is the working DEMO http://jsfiddle.net/LKXLc/

setInterval(function() {
if( $("div").hasClass("one"))
{
      $("div").removeClass("one").addClass("two");
}
else
{
      $("div").removeClass("two").addClass("one");
}
}, 10);

Answer 6

You can do that with CSS

Demo

HTML Markup

<a href="#" id="msElem">Click Here</a>

CSS

@keyframes msPulseEffect {
   0% {
     box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
   }
 100% {
     box-shadow: 0 0 0 30px rgba(0, 0, 0, 0);
   }
 }
 #msElem{
   margin: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100px;
   height: 100px;
   color:white;
   background-color: #0078D7;
   border-radius: 50%;
   text-decoration: none;
   animation: msPulseEffect 1s infinite;
 }