Looking for a fade out after success message from page

[gary4u]

Hi,

Looking for a fade out after success message from page. I am using this code to place a Success message , now I want this message to fade after "submit Success" .

Can any please help me out.

This is the code in the php

function formSuccess(){
$("#contactForm")[0].reset();
submitMSG(true, "Message Submitted!")
}

I need this message- "Message Submitted!"  to fade after showing on the page.

 

Thanks

[ginerjm]

Have you googled for help???

I did.

 

https://www.tutorialspoint.com/css/css_animation_fade_out.htm

[gary4u]

Thanks. If I had to come across this news earlier I would have used it .But the Website structure is mostly done and the contact page is working fine with the message display on the page.and I do not want to disturb it by changing the whole setup. I just want to add this extra code to the after submit message. I am just looking for this small help to complete it. It is the tail end of the website.

[ginerjm]

And what this link gives you is just that - a small bit of css code mostly that will do your fadeout.

 

Did you even look at the code?

[gary4u]

Yes I did. But it does not seems to match my code entry. This is for the reload full page , What I need is just to fade the  " Success message " , which is near to the Contact Form.

[ginerjm]

You didn't mention that you were doing some kind of ajax output.  I now see the jscript code which I don't follow.  I assumed that your message was part of the initial display of your page output so this would be perfect there.

Try googling some more yourself.  Good luck.

[gary4u]

Hi ,

Thanks for all your support. I think I got it. Anyways its the coming forward to help that's important.

Thanks again.

[Barand]

You can do with an animated SVG image also

function fadingMessage($messageToDisplay)
{
        $msg = <<<MSG
            <svg width=800 height=80 viewBox="0 0 800 80">
            <style type='text/css'>
                .msg {
                    font-family: verdana, sans-serif;
                    font-size: 36pt;
                    fill: #8F1FCF;
                }
            </style>
            <text class="msg" x=0 y=70 >$messageToDisplay</text>
            <animate attributeName="opacity" from="1" to="0" begin="1s" dur="3s" fill="freeze" />
        </svg>
MSG;
        return $msg;
}

echo  fadingMessage("This text will just fade away")