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/

score 9 · Answer 1 · answered Jun 14 '13 at 11:50

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

score 8 · Accepted Answer · edited Sep 02 '16 at 09:43

8

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.

edited Sep 02 '16 at 09:43

StateItPrimitive

139
1
6

answered Jun 14 '13 at 11:50

Andrea Ligios

49,480
26
114
243

This isn't my question, but I think this is the best and easiest way. – Kees Sonnema Jun 14 '13 at 11:57
Ahahahah didn't noticed you weren't OP (but you can upvote too ;) – Andrea Ligios Jun 14 '13 at 11:58
On more question... How do I do "transition: all 1s ease;" in jquery – It worked yesterday. Jun 14 '13 at 12:26
Ho do you add that CSS3 property with jquery instead that with CSS ? I don't know why you should do that - it would be better to have it on CSS and toggling the class with jQuery, but: http://stackoverflow.com/a/10237742/1654265 – Andrea Ligios Jun 14 '13 at 12:34

score 0 · Answer 3 · answered Jun 14 '13 at 11:50

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

score 0 · Answer 4 · answered Jun 14 '13 at 11:50

0

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

answered Jun 14 '13 at 11:50

WheretheresaWill

5,882
7
30
43

score 0 · Answer 5 · answered Jun 14 '13 at 11:55

0

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

answered Jun 14 '13 at 11:55

spring

760
4
10

Ashin · Answer 6 · 2019-10-21T12:21:34.077

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

Pulse effect with CSS box-shadow by using jQuery

6 Answers6