0

我目前有一个非常好的淡入淡出的登录页面，可以在这里看到：ournewlife.com/001/login.php

在用户成功登录后，我希望它在重定向之前淡出相似的时间。我在以下代码中向 load.fadeOut 传递了一个值（7777）：

$('#login').on('click', function(e) {
    // Some variables
    var username = $('input[name=username]').val(),
            password = $('input[name=password]').val(),
            csrf = $('input[name=csrf_field]').val(),
            load = $('.form_loader');
    feedback.slideToggle();
    load.fadeIn();
    // Check to see if any empty values..
    // I mean c'mon.. Why disturb PHP?
    if ( username === "" || password === "" || csrf === "" ) {
        feedback.removeClass().addClass('alert error').text('Please enter your username and or password!').slideToggle();
        load.fadeOut();
        return false;
    }
    // Post the data and validate it.
    $.ajax({
        type: 'post',
        url: 'process.php',
        dataType: 'json',
        data: {
            username: username,
            password: password,
            csrf_field: csrf,
            task: "login"
        }, success: function(data) {
            load.fadeOut(7777);
            feedback.removeClass().addClass( (data.error === false) ? 'alert success' : 'alert error' ).html(data.message).fadeIn();
            if (data.error === false) {
                location.href = data.redirect;
            }
        }, error: function(XMLHttpRequest, textStatus, errorThrown) {
            feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
            load.fadeOut();
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
            // console.log(XMLHttpRequest.responseText);
        }
    });
    return false;
});

这是此处较大代码的一部分：

 jQuery.support.placeholder = (function(){
 var i = document.createElement('input');
 return 'placeholder' in i;
 })();

$(document).ready( function() {

$("body").css("display", "none");
$("body").fadeIn(6666);

// Does it support placeholders?
if ( $.support.placeholder ) {
    // Let the users know what to enter.
    $('.input-block > label').hide();
}

// Global Variables
feedback = $('#feedback');

// Hide the JS message
$('.no-js').hide();

/**
 * Called when the user forgets their password.
 */
$('#forgot_password').on('click', function() {
    // Some variables.
    var email = $('input[name=email]').val();
    feedback.fadeOut();
    if ( email === "" ) {
        feedback.removeClass().addClass('alert error').text('Please fill out all required fields!').slideToggle();
        return false;
    }
    $.ajax({
        type: 'POST',
        url: 'process.php',
        dataType: 'json',
        data: {
            email: email,
            task: 'forgot_password'
        }, success: function(data) {
            feedback.removeClass().addClass((data.error === true) ? 'alert error' : 'alert success').text(data.message).slideToggle();
        }
    });
    return false;
});

$('#save_settings').on('click', function() {
    feedback.fadeOut();
    var allow_reg = parseInt($('#registration').val()),
            location = $('#location').val();
    $.post('process.php', {
        allow_reg: allow_reg,
        location: location,
        task: 'save_settings'
    }, function( data ) {
        if ( data.error === false ) {
            // We have no errors.
            feedback.removeClass().addClass('alert success').text(data.message).slideToggle();
        }
    }, 'json');
    return false;
});

/**
 * Called when the user registers a new account.
 */
$('#register').on('click', function() {
    // Some variables.
    var username = $('input[name=username]').val(),
            password = $('input[name=password]').val(),
            email = $('input[name=email]').val(),
            captcha = $('input[name=captcha]').val();
            feedback.fadeOut();
    // Some validation.
    if ( username === "" || password === "" || email === "" || captcha === "") {
        feedback.removeClass().addClass('alert error').text('Please fill out all required fields!').slideToggle();
        return false;
    }
    $.ajax({
        type: 'POST',
        url: 'process.php',
        dataType: 'json',
        data: {
            username: username,
            password: password,
            email: email,
            captcha: captcha,
            task: 'new_user'
        }, success: function(data) {
            feedback.removeClass().addClass((data.error === true) ? 'alert error' : 'alert success').text(data.message).slideToggle();
        }
    });
    return false;
});

/**
 * When the user clicks on the login button.
 */
$('#login').on('click', function(e) {
    // Some variables
    var username = $('input[name=username]').val(),
            password = $('input[name=password]').val(),
            csrf = $('input[name=csrf_field]').val(),
            load = $('.form_loader');
    feedback.slideToggle();
    load.fadeIn();
    // Check to see if any empty values..
    // I mean c'mon.. Why disturb PHP?
    if ( username === "" || password === "" || csrf === "" ) {
        feedback.removeClass().addClass('alert error').text('Please enter your username and or password!').slideToggle();
        load.fadeOut();
        return false;
    }
    // Post the data and validate it.
    $.ajax({
        type: 'post',
        url: 'process.php',
        dataType: 'json',
        data: {
            username: username,
            password: password,
            csrf_field: csrf,
            task: "login"
        }, success: function(data) {
            load.fadeOut(7777);
            feedback.removeClass().addClass( (data.error === false) ? 'alert success' : 'alert error' ).html(data.message).fadeIn();
            if (data.error === false) {
                location.href = data.redirect;
            }
        }, error: function(XMLHttpRequest, textStatus, errorThrown) {
            feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
            load.fadeOut();
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
            // console.log(XMLHttpRequest.responseText);
        }
    });
    return false;
});

$('#forgot-password').on('click', function() {
    // Some variables.
    var forgotEmail = $('input#forgot-email').val(),
            feedback = $('#feedback'),
            load = $('#loading');

    feedback.fadeOut();
    load.fadeIn();
    if (forgotEmail === "") {
        load.fadeOut();
        feedback.removeClass().addClass('error').text('Please enter your email so that I can work with it!').fadeIn();
        return false;
    }
    $.ajax({
        type: 'post',
        url: 'process.php',
        dataType: 'json',
        data: {
            forgotEmail: forgotEmail
        }, success: function(data) {
            load.fadeOut();
            feedback.removeClass().addClass( (data.error === false) ? 'success' : 'error' ).text(data.message).fadeIn();
        }, error: function(XMLHttpRequest, textStatus, errorThrown) {
            feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
            load.fadeOut();
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });
    return false;
});

/** TODO: Do this **/
$('#renew-password').on('click', function() {
    var passwordOne = $('input#re-password').val(),
            passwordTwo = $('input#re-password-2').val(),
            emailReset = $('input#email-reset').val(),
            resetCode = $('input#reset-code').val(),
            feedback = $('#feedback'),
            load = $('#loading');

    feedback.fadeOut();
    load.fadeIn();

    if ( (passwordOne === "") || (passwordTwo === "") || (emailReset === "") || resetCode === "") {
        load.fadeOut();
        feedback.removeClass().addClass('error').text('Please enter your new password, two times!').fadeIn();
        return false;
    }

    $.ajax({
        type: 'post',
        url: 'process.php',
        dataType: 'json',
        data: {
            passwordOne: passwordOne,
            passwordTwo: passwordTwo,
            emailReset: emailReset,
            resetCode: resetCode
        }, success: function(data) {
            load.fadeOut();
            feedback.removeClass().addClass( (data.error === false) ? 'success' : 'error' ).text(data.message).fadeIn();
        }, error: function(XMLHttpRequest, textStatus, errorThrown) {
            feedback.removeClass().addClass('error').text('Something went wrong. Please check the console for more information.').fadeIn();
            load.fadeOut();
            console.log(XMLHttpRequest);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });

    return false;
});

 });

我在其他地方搜索并尝试了其他解决方案，但它们没有奏效。我又回到了这个，因为它似乎是最简单和最直接的。如果有人对如何实现这一点有任何想法，那就太好了！

4

3 回答 3

0 
success: function(data) {
  if(data.error){
    feedback.removeClass().addClass('alert error').html(data.message);
  } else {
    load.fadeOut(7777, function(){
      window.location.href = data.redirect;
    }
  }
}

我就是这样做的。如果登录不正确，您真的不想在重试之前等待 fadeOut 执行此操作。

于 2013-02-09T17:03:00.467 回答
0

使用淡出回调： 

feedback.removeClass().addClass( (data.error === false) ? 'alert success' : 'alert error' ).html(data.message).fadeIn();
load.fadeOut(7777, function() {
       if (data.error === false) {
            location.href = data.redirect;
        }
});
于 2013-02-09T16:56:31.250 回答
0

感谢您的小费。此代码有效： 

 success: function(data) { 
      if(data.error) load.fadeOut(7, function() { 
        feedback.removeClass().addClass('alert error').html(data.message).fadeIn();
        }); 
      else $("body").fadeOut(4444, function() { 
        //feedback.removeClass().addClass('alert success').html(data.message).fadeIn(); 
        setTimeout(new Function("location.href = '" + data.redirect+ "';")); 
 });
于 2013-02-10T12:43:23.710 回答