CODEWITHSUNDEEP
javascriptjquery
query
query

Reputation: 529

How to hide this message using jQuery?

Based on a condition i am assigning a new message to a variable then showing the message using jquery.Now after 2 seconds i want to hide the message and show another new message.The problem is as i am not showing the message into a html div so i am confused how to attain this ? 

if(newresp == "success")
{
var newmsg="<img src=\"images/myimg.png\"><span style='color:#00CCFF;font-size:25px;margin-top:2px'> validated!</span>";
var newmsg1="redirecting ......";
$("#status").hide().fadeIn('slow').html(newmsg);
// i want to hide this newmsg now and then show the newmsg1

}

Upvotes: 1

Views: 650

Answers (4)

Pedro Lobito
Pedro Lobito

Reputation: 98921

You can use the javascript setTimeout method.

if(newresp == "success")
{
var newmsg="<img src='images/myimg.png'><span style='color:#00CCFF;font-size:25px;margin-top:2px'> validated!</span>";
var newmsg1="redirecting ......";

    $( "#status" ).hide().fadeIn( 500 ).html(newmsg).delay( 2000 ).fadeOut( 500 );

    setTimeout(function() {
        $( "#status" ).hide().fadeIn(500 ).html(newmsg1).delay( 2000 ).fadeOut( 500 );
    }, 3000);

    setTimeout(function() {
        window.location='http://google.com';
}, 6000);
};

Demo

The first SetTimeout delay is 3000 (3 seconds), the sum of time the first message is visible (500+2000+500)
The second SetTimeout delay is 6000 (3''+3'') and then redirects.

Upvotes: 1

James Grundner
James Grundner

Reputation: 1484

You can use the jQuery delay function to wait.

So...

$("#status").hide().fadeIn('slow').html(newmsg).delay( 20000 ).fadeOut('slow').delay( 20000 ).html(newmsg1).fadeIn('slow');

This gives a 2 second delay between both. 2000 is milliseconds = 2 seconds

Edit: Use the setTimeout function instead...

var newmsg="<span style='color:#00CCFF;font-size:25px;margin-top:2px'>Your click is validated!</span>";
var newmsg1="ok";
$("#verify_status").hide().html(newmsg).fadeIn('slow', function(){
    setTimeout(function(){
        $("#verify_status").hide().html(newmsg1).fadeIn('slow');
    }, 2000);
});

Upvotes: 0

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

not sure about your entire scenario, but here's a quick fiddle to demonstrate the idea.

basically you want to wrap the content in a div or something and give it an id so you can call it specifically

Upvotes: 1

ChrisV
ChrisV

Reputation: 1309

Create new DOM elements like this:

var img = $('<img src=\"images/myimg.png\">');
var span = $('<span style="color:#00CCFF;font-size:25px;margin-top:2px"> validated!</span>');

Then .append() them both to the div and fade it in. You need to wait for the fade to finish like this:

$(selector).fadeIn('slow', function() {
    // will be called when the element finishes fading in
});

Then you can say: $('div.status span').html('Your new message');

Upvotes: 0

Related Questions