How to smooth fade in-out for toggle text using button click?

Amit Pathak

I have the following code -

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function toggleText(){
    if ($("#txt-1").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "block");
        $("#txt-3").css("display", "none");
    } else if ($("#txt-2").css("display") != "none") {
        $("#txt-1").css("display", "none");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "block");
    } else {
        $("#txt-1").css("display", "block");
        $("#txt-2").css("display", "none");
        $("#txt-3").css("display", "none");
    }
};
</script>
</head>
<body>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>
<p id="txt-3" style="display: none;">See you soon!</p>

</body>
</html>

It toggles the text on button click

The thing that I am looking for is, to make a smooth transition between the texts (maybe fade in-out). I am not sure whether to write a CSS or jQuery.

What I tried is to write a CSS class -

.smooth-fade {
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

and provide this class name smooth-fade to all the h1 tags. It does not work, what is the best workaround to do this task ?

dantheman

You can use jquery for this:

  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });

First fade out the elements you want, then use the callback function to fade the others in.

function toggleText(){
  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-06-23

Comments

0 comments

How to smooth fade in-out for toggle text using button click?

How to smooth fade in-out for toggle text using button click?

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

How to import an asset in swift using Bundle.main.path() in a react-native native module

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

pump.io port in URL

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

BigQuery - concatenate ignoring NULL

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

Do Idle Snowflake Connections Use Cloud Services Credits?

maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

Generate random UUIDv4 with Elm

Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

Is it possible to Redo commits removed by GitHub Desktop's Undo on a Mac?

flutter: dropdown item programmatically unselect problem

Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

EXCEL: Find sum of values in one column with criteria from other column

Pandas - check if dataframe has negative value in any column

How to use merge windows unallocated space into Ubuntu using GParted?

Make a B+ Tree concurrent thread safe

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements