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

Issue with function operation

How can I utilize JavaScript to generate a dynamic value in a URL and then submit it through a form?

The use of DefaultAnnotationHandlerMapping in the dispatcher.xml file is no longer recommended

Modifying the CSS design of specific columns within a table created using JavaScript

React - updating key prop does not trigger re-render of child component

Form_Open will automatically submit - Ajax Submission in CodeIgniter

Using AJAX to Query a PHP Database

Creating a dynamic animation effect on a div with a changing number of child elements

Is there a way I can detect a browser timeout and display a custom error message?

Exploring the Information Within HTML Forms

Challenge with Bootstrap Popover: Unable to Capture Button Click Event inside Popover

Steps for including a map in a property file for JavaScript parsing

Troubleshooting Flexbox in Internet Explorer 11: Issue with 100% width not functioning properly within nested flex containers with a 'column'

Having trouble initializing the canvas with fabric.js and Vue.js, as the function this.lowerCanvasEl.getContext is not recognized

Tips for modifying the font of options within select menus with jQuery Mobile

How to ensure NodeJS waits for a response before returning a value

Stopping the parent onclick event from propagating to a child element within a bootstrap modal

Leveraging web workers for asynchronous API calls

Tips on wrapping div elements while maintaining equal width in different screen sizes using @media queries

What could be the reason for the CSS file not getting applied to the HTML in my project?