CODEWITHSUNDEEP
jqueryhtml
Leron
Leron

Reputation: 9866

How to show paragraph only for a few seconds and then hide it using jQuery

I am submitting form to the server and if everything is ok I want to show some kind of confirmation message for the user.

The problem is that I'm using ASP.NET MVC 4 where I can do this:

@if (ViewBag.ConfirmMessage != null)
{ 
<p>@ViewBag.ConfirmNMessage</p>
}

but this way the messages stays which I think will be confusing for the user. If I use something like :

 @if (ViewBag.ConfirmMessage != null)
{ 
    <script>
        alert("Some message");
    </script>
}

but first alert works differently from showing a paragraph and also the ViewBag.ConfirmMessage already has the message that I want to display and in the future it will be more maintainable if I show the message from ViewBag.ConfirmMessage than to write some message in every view.

So my question is how I can hide <p>@ViewBag.ConfirmNMessage</p> after X seconds if it's shown?

Upvotes: 0

Views: 2445

Answers (5)

Sowmya
Sowmya

Reputation: 26969

HTML

  <div class="wrap">
  <p>Fade this out</p>
  </div>

Jquery

    $(document).ready(function() { 
    setTimeout(function() { 
        $('.wrap p').fadeOut(); 
 }, 400); 
});

DEMO

Upvotes: 1

Jules Gagnon-Marchand
Jules Gagnon-Marchand

Reputation: 3781

$('p').show("slow").delay(4000).hide("slow");

http://jsfiddle.net/qxR95/

Upvotes: 0

Praveen
Praveen

Reputation: 56509

You can make use of setTimeout()

function fun() {
  $('p').hide();  //better to have id selector
}

var inter = setTimeout(fun, 1000); //1000 represents 1 second

Also a simple way using fadeOut() without using setTimeout()

$("p").fadeOut( 1000, "linear", complete ); //better to have id selector

Upvotes: 1

Maurice Perry
Maurice Perry

Reputation: 32831

@if (ViewBag.ConfirmMessage != null)
{ 
<p id="myMessage">@ViewBag.ConfirmNMessage</p>
<script>
$(function() {
    setTimeout(function() {
        $("#myMessage").hide();
    }, 5000);
});
</script>
}

Upvotes: 0

Andrew
Andrew

Reputation: 5340

@if (ViewBag.ConfirmMessage != null)
{ 
<p id="confirmMsg">@ViewBag.ConfirmNMessage</p>
}

And 

@if (ViewBag.ConfirmMessage != null)
{ 
    <script>
    setTimeout(function() {

        $('#confirmMsg').hide();
    }, X * 1000);
    </script>
}

Upvotes: 5

Related Questions