user2733334
user2733334

Reputation:

how to have two fadin, delay and fadeout afther another?

How to i do when i click a button it will first .fadeIn(0); .dealy(2000); .fadeOut(600); and say "Validating..." THEN it will say "Success fully log in" and redirect to index.php?

i did try this but it did not work:

function save() {
    $('#save_first').html('Validating...');
    $('#save_first').fadeIn(1);
    $('#save_first').delay(2000);
    $('#save_first').fadeOut(600);
    $('#save_second').html('Success fully log in!');
    $('#save_second').delay(2601);
}

HTML

header('Location: index.php');
        exit();

Upvotes: 1

Views: 85

Answers (1)

charlitosJS
charlitosJS

Reputation: 294

Stack them up and use a callback for the rest along with a setTimeOut for the redirection

var loginUser = function(){

    $('#save_first').fadeIn(1).delay(2000).fadeOut(600, function(){
        $('#save_second').html('Success fully log in!');
        //Redirect after 2.6 seconds delay
        setTimeout(function() {
           window.location.href = "/index.php";
        }, 2600);
    });

};

then whenever you want this to trigger just do :

loginUser();

to trigger on click of "element" do :

$(element).click(loginUser);

Upvotes: 5

Related Questions