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/

2ne · Accepted Answer · 2013-06-14 11:50:59Z

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

StateItPrimitive · Accepted Answer · 2016-09-02 09:43:06Z

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 2, 2016 at 9:43

StateItPrimitive

1591 silver badge6 bronze badges

answered Jun 14, 2013 at 11:50

Andrea Ligios

50.4k29 gold badges127 silver badges256 bronze badges

4 Comments

Kees Sonnema Over a year ago

This isn't my question, but I think this is the best and easiest way.

Andrea Ligios Over a year ago

Ahahahah didn't noticed you weren't OP (but you can upvote too ;)

It worked yesterday. Over a year ago

On more question... How do I do "transition: all 1s ease;" in jquery

Andrea Ligios Over a year ago

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: stackoverflow.com/a/10237742/1654265

Spokey · Accepted Answer · 2013-06-14 11:50:23Z

0

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

answered Jun 14, 2013 at 11:50

Spokey

11k2 gold badges31 silver badges44 bronze badges

Comments

WheretheresaWill · Accepted Answer · 2013-06-14 11:50:38Z

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, 2013 at 11:50

WheretheresaWill

6,6088 gold badges34 silver badges43 bronze badges

Comments

spring · Accepted Answer · 2013-06-14 11:55:41Z

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, 2013 at 11:55

spring

7704 silver badges10 bronze badges

Comments

Ashin · Accepted Answer · 2019-10-21 12:21:34Z

0

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

edited Oct 21, 2019 at 12:21

answered Mar 20, 2019 at 16:03

Ashin

3864 silver badges8 bronze badges

Collectives™ on Stack Overflow

Pulse effect with CSS box-shadow by using jQuery

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

4 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related