Repetitive notifications using Jquery

Question

Repetitive notifications using Jquery

Utilizing the CSS and HTML code below to showcase a notification whenever an event takes place.

HTML

 <div id="notification_wrapper">
            <div id="notification"></div>
 </div>

CSS

#notification_wrapper 
{
    position: fixed;
    left: 50%;
    float: left;
    z-index: 1060;
}

#notification 
{
    left: -50%;
    float: left;
    position: relative;
    border: solid 1px black;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 20px #000000;
    background-color: yellow;
    font-weight: bold;
    display: none;
}

jQuery

$("#notification").text("A message tobe displayed").fadeIn().fadeOut(5000);

The current issue is that when I trigger the jQuery code with a button click, the notification displays correctly and fades out after 5 seconds. However, if I click the button again within those 5 seconds, the second notification gets queued up and displays once the first one has faded out.

My desired functionality is as follows: Upon pressing the button, the notification should display for 5 seconds. If I press the button again within this timeframe, the first notification should immediately disappear and only the new one should appear.

For a demonstration, check out the FIDDLE attached. FIDDLE

jquery html css

Answer 1

Answer №1

If you want to halt the current animation, make sure to include .stop(true, true) at the start of your chain.

$("#notification").text("Make sure to stop the animation").stop(true, true).fadeIn().fadeOut(5000);

Check out this example on JSFiddle for more insight!

Here's a link to the jQuery documentation on stopping animations.

Answer 2

If you want to halt the current animation, make sure to include .stop(true, true) at the start of your chain.

$("#notification").text("Make sure to stop the animation").stop(true, true).fadeIn().fadeOut(5000);

Check out this example on JSFiddle for more insight!

Here's a link to the jQuery documentation on stopping animations.

Answer 3

Answer №2

To ensure the animation is currently active, you should include a check:

let is_animation_running = false;
$(":button").click(function() {
    if(is_animation_running) return;
    is_animation_running = true;
    $("#notification").text("Displaying a message").fadeIn().fadeOut(5000, function(){
       is_animation_running = false;
    });
});

Answer 4

To ensure the animation is currently active, you should include a check:

let is_animation_running = false;
$(":button").click(function() {
    if(is_animation_running) return;
    is_animation_running = true;
    $("#notification").text("Displaying a message").fadeIn().fadeOut(5000, function(){
       is_animation_running = false;
    });
});

Answer 5

Answer №3

Perhaps you can give this a try using the jquery .stop() method, like in this example: https://api.jquery.com/stop/, you can check out the code on this JSFiddle

var counter = 1;
$(":button").click(function() {
  $("#notification").text('Message: ' + counter + ' to display').stop().fadeIn().fadeOut(5000);
  counter++;
});

#notification_wrapper {
  position: fixed;
  left: 50%;
  float: left;
  z-index: 1060;
}
#notification {
  left: -50%;
  float: left;
  position: relative;
  border: solid 1px black;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px #000000;
  background-color: yellow;
  font-weight: bold;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification_wrapper">
  <div id="notification"></div>
</div>
<input type=button value=click />

Answer 6

Perhaps you can give this a try using the jquery .stop() method, like in this example: https://api.jquery.com/stop/, you can check out the code on this JSFiddle

var counter = 1;
$(":button").click(function() {
  $("#notification").text('Message: ' + counter + ' to display').stop().fadeIn().fadeOut(5000);
  counter++;
});

#notification_wrapper {
  position: fixed;
  left: 50%;
  float: left;
  z-index: 1060;
}
#notification {
  left: -50%;
  float: left;
  position: relative;
  border: solid 1px black;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 0px 20px #000000;
  background-color: yellow;
  font-weight: bold;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="notification_wrapper">
  <div id="notification"></div>
</div>
<input type=button value=click />

Answer 7

Answer №4

Here are the steps you should follow:

$(":button").click(function(){
$("#notification").stop();    
$("#notification").text("Display this message").fadeIn().fadeOut(5000);
});

Your fiddle has been updated with the new code.

Answer 8

Here are the steps you should follow:

$(":button").click(function(){
$("#notification").stop();    
$("#notification").text("Display this message").fadeIn().fadeOut(5000);
});

Your fiddle has been updated with the new code.

Repetitive notifications using Jquery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Position the button at the bottom of the card using Bootstrap

Step-by-step guide for implementing an "on change" event for a select box within a dialog box

How to send information to a modal component in ReactJS?

What is the best way to find the Selenium Webdriver element for the following HTML/jQuery snippet?

Black screen issue with JW Player on iPad

Is it possible to postpone the loading of an element with the help of jQuery?

Eliminate Dates from the Past - Jquery Datepicker

What is the best method for sending data from an HTML page to a Django view in order to utilize it

Implementing Content-Security-Policy with React and Material-UI v4 for secure styling requirements

Limit the user's ability to choose just one radio button from each of two groups that have identical values

Utilizing the jQuery Form Plugin for efficient form handling, incorporating Ajax File Upload for

Adding a condition prior to inserting rows into a table using jQuery

Limited access textbox

Obtain the location information upon the loading of the webpage

Troubleshooting the pre-loader image loading problem

I'm having trouble with my form submission using AJAX, as it's not echoing

Middle row positioning for button in Bootstrap 4 form-inline

Show stored procedure query results in ASP.NET MVC

Is it possible for the client to see the PHP output within this JQuery script?

Send the user back to the homepage without the need to refresh the page