How to fade in and out text and css using jquery

Question

What i want to do is change the text and the css of a div for a specific amount of time by fading in and out the next text and css.

When the form gets submitted, i want to add a class to the div, fade in the css and the new text which is 'Number successfully added' for about 3 secs, then fade out that text and remove the css and put the old text back in its place.

My div that would contain the text and needs to have a class added to it is

<div id="form_result"></div>

I have tried this but it doesn't work...maybe the logic is wrong.

$('#form_result').html('<h3>Number successfully added!!</h3>').addClass('form_result').fadeIn('fast').delay(1500).fadeOut('fast').removeClass('form_result').html('<h3>Please enter a number:</h3>');

Answer 1

Try the below js. It works fine in JSfiddle.

DEMO HERE

HTML

<div id="main_div">
    <span id="form_result"><h3>Please enter a number</h3></span>
</div>
<input type="button" onclick="fade_function();" value="Click" />

JS

function fade_function()
{
    $("#form_result").html("<h3>Number successfully added!!<h3>");
    $('#main_div').animate({opacity: 1.0}, 3000, function(){
        $("#form_result").html("<h3>Please enter a number</h3>");  
    });
}