Как показать абзац только на несколько секунд, а затем скрыть его с помощью jQuery

Question

Я отправляю форму на сервер, и если все в порядке, я хочу показать какое-то подтверждение для пользователя.

Проблема заключается в том, что я использую ASP.NET MVC 4, где я могу это сделать:

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

, но таким образом, что сообщения остается, которые я думаю, будет запутанным для пользователя. Если я использую что-то вроде:

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

но первых alert работ по-разному показывать абзац, а также ViewBag.ConfirmMessage уже есть сообщение, что я хочу, чтобы отобразить и в будущем он будет более ремонтопригоден, если я показываю сообщение от ViewBag.ConfirmMessage, чем писать какое-либо сообщение во всех представлениях.

Так что мой вопрос в том, как я могу скрыть <p>@ViewBag.ConfirmNMessage</p> после X секунд, если он показан?

Answer 1

Вы можете использовать setTimeout()

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

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

Кроме простой способ использования fadeOut() без использования setTimeout()

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

Answer 2

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

И

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

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

Answer 3

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

http://jsfiddle.net/qxR95/

Answer 4

HTML

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

Jquery

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

DEMO

Answer 5

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