Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

Question

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

My goal is to create a pulsating effect using CSS box-shadow through jQuery. Despite my best efforts, the code I attempted failed to produce the desired smooth pulse effect with box-shadow.

The code snippet I experimented with:

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

The accompanying CSS styling:

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

Lastly, the jQuery script:

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

You can view the fiddle here.

javascript jquery html css

Answer 1

Answer №1

Check out this amazing Pure CSS Example on 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

Check out this amazing Pure CSS Example on 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 3

Answer №2

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

If you want to implement it, you must adjust your code like this:

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

This will function as an on-off switch; for smoother transitions, consider utilizing CSS3 transition effects like so:

transition: all 1s ease;

See Demo

Note that pure CSS3 can handle this task without the need for additional javascript.

Answer 4

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

If you want to implement it, you must adjust your code like this:

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

This will function as an on-off switch; for smoother transitions, consider utilizing CSS3 transition effects like so:

transition: all 1s ease;

See Demo

Note that pure CSS3 can handle this task without the need for additional javascript.

Answer 5

Answer №3

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

You should use setInterval with a function like this:

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

FIDDLE

PS: I enhanced the transition by adding CSS transitions to box-shadow

Answer 6

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

You should use setInterval with a function like this:

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

FIDDLE

PS: I enhanced the transition by adding CSS transitions to box-shadow

Answer 7

Answer №4

Your Fiddle is having some issues with the setInterval method and the toggle function arguments are incorrect. To fix this, you can try the following solution:

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

Answer 8

Your Fiddle is having some issues with the setInterval method and the toggle function arguments are incorrect. To fix this, you can try the following solution:

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

Answer 9

Answer №5

Check out this live DEMO http://jsfiddle.net/LKXLc/

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

Answer 10

Check out this live DEMO http://jsfiddle.net/LKXLc/

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

Answer 11

Answer №6

You have the power to achieve this using CSS

Check out a demo here

Sample HTML Code

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

CSS Styling

@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);
   }
 }
 #msElement{
   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;
 }

Answer 12

You have the power to achieve this using CSS

Check out a demo here

Sample HTML Code

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

CSS Styling

@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);
   }
 }
 #msElement{
   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;
 }

Creating a dynamic pulse effect using jQuery to manipulate CSS box-shadow

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Load as soon as the browser is launched

Error: Axios header not refreshing automatically in React. User must manually refresh the page

Tips for managing onClick events within a conditional component

After the update, Material UI is causing a TypeError by throwing an error stating that it cannot read the property 'muiName' of an

Adding JavaScript files to a project in Ionic2 with Angular2 integration

I'm struggling with an issue of being undefined in my React.js project

Hide the search popup when the user clicks on the "find" button within the jqgrid

Stop webpage loading with -webkit-transform

Is there a way to customize the navbar layout so that link 1 is aligned to the right side, link 2 is centered, and link 3 is positioned on the right?

Refresh the vue-owl-carousel following a dynamic data update

conceal elements created with JQuery within an AJAX function

Issues with data responses in Jquery ajax requests

What is the best way to ensure that my cards maintain consistent proportions?

Rearranging components in React does not automatically prompt a re-render of the page

Error message "TypeError: onClick is not a function" occurs when attempting to use a prop in a functional component

When using React.js Material UI's CardActionArea with a flex display, the children elements may not automatically use the full width as expected

Retrieving data from multiple mongo collections and merging selected attributes from the output

Guide on how to show the index value of an array on the console in Angular 2

Incorporating an array of JSON into a Mongoose schema in JavaScript

Numbering each numeral