Is it better to let the old flash message fade away before introducing the new one?

Question

Is it better to let the old flash message fade away before introducing the new one?

I'm a beginner when it comes to jQuery. I have a form that calculates and displays the result in a flash message. My desired behavior is as follows:

When the form is submitted for the first time, the flash message with the results should fade in.
For subsequent submissions, the old flash message should fade out before the new one fades in.

I'm having trouble achieving this because both the old and new results share the same id.

Currently, only the fade in effect is working properly.

JavaScript (jQuery):

$(function() {
  $(".btn-primary").click(function() {
    $("#diagnosis").fadeOut("slow");
  });
$('#diagnosis').delay(0).fadeIn('normal', function() {
  $(this).delay(2500);
  });
});

CSS:

#diagnosis { display:none; }

javascript jquery css

Answer 1

Answer №1

You have the ability to chain fadeIn and fadeOut animations in Jquery. It is important to note that you can also include a complete function within each animation, like this:

$('#result').fadeOut('fast', () => {})

. This guarantees that the result is only updated once it has completely disappeared, which will then be followed by the new result fading in immediately with the updated value. For further information, please refer to this link.

let arr = [4, 5, 6, 7, 8, 9, 10]

$('form').on("submit", (e) => {
  e.preventDefault();
  
  // simulate calculated result 
  let genIdx = Math.floor(Math.random() * 7);
  let resultVal = arr[genIdx];
 
  $('#result').fadeOut('fast', () => {
      $('#result').text(resultVal);
  }).fadeIn('fast');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form>
      <p id="result"></p>
      <button type="subimit">Submit</button>
    </form>
  </body>
</html>

Answer 2

You have the ability to chain fadeIn and fadeOut animations in Jquery. It is important to note that you can also include a complete function within each animation, like this:

$('#result').fadeOut('fast', () => {})

. This guarantees that the result is only updated once it has completely disappeared, which will then be followed by the new result fading in immediately with the updated value. For further information, please refer to this link.

let arr = [4, 5, 6, 7, 8, 9, 10]

$('form').on("submit", (e) => {
  e.preventDefault();
  
  // simulate calculated result 
  let genIdx = Math.floor(Math.random() * 7);
  let resultVal = arr[genIdx];
 
  $('#result').fadeOut('fast', () => {
      $('#result').text(resultVal);
  }).fadeIn('fast');

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <form>
      <p id="result"></p>
      <button type="subimit">Submit</button>
    </form>
  </body>
</html>

Is it better to let the old flash message fade away before introducing the new one?

Answer №1

Similar questions

Tips for creating seamless image transitions using a toggle button

Update the div content following a comment submission

Utilizing a combination of HTML, AJAX, and PHP, transfer an HTML input array via AJAX to a PHP webpage

JavaScript takes the spotlight before CSS

Locating the specific row associated with a cell using jQuery

Is there a delay when dynamically filling out an input field in a form with the help of the jquery .keypress() function?

Displaying Dates in an Express Application using EJS

Ways to eliminate text following a string substitution

Position a modal in the vertical center with scroll functionality for handling extensive content

React's useState Hook: Modifying Values

"Enhance your forms with Ajax for seamless uploading and convenient text

Using StencilJS to Incorporate CSS/SASS Styles from node_modules

Mastering the art of exchanging cross-domain ajax data in userscripts

Divide the number by the decimal point and then send it back as two distinct parts

Locating discord.js users who possess multiple roles

How to Implement Horizontal Sorting with jQuery Using Various HTML Elements

Unable to Retrieve Stripe Connect Account Balance

What is the best way to display the Edit and Delete buttons in a single column?

Guide to updating the value of an input field with Selenium in Python

The grid flex end is behaving differently than I anticipated