关于通过jQuery进行图像替换褪色等的思考

Question

Any thoughts on this approach? Any feedback greatly appreciated. tryFindUserName is an AJAX call that returns a simple true or false. My concern is that it is not neat enough, nor does it extend very well. Also, should I check state change as the code below always hides and shows the img.

Also any thoughts on the hard coding of the image path?

// Change handlers for registration form
//
$('#login_register_username').keyup(function () {
    var length = $('#login_register_username').val().length;
    if (length < 4) {
        return;
    }

    var source = null;
    var result = tryFindUserName($('#login_register_username').val());
    if (result == false) {
        source = "tick.png";
    }
    else {
        source = "cross.png";
    }

    $("#login_register_username_confirmation_img").hide().attr('src', '../../Images/Ajax/' + source);
    $("#login_register_username_confirmation_img").fadeIn(1000);

    updateRegisterButtonState();
});

Answer 1

Use CSS for styling, not javascript.

With javascript you can fade an element in/out, or switch classes on certain user actions and so on. But the fading can also be done with CSS transitions. ( Example ).

In your case, I'd create an image with both states, and animate background-position