關於通過jQuery進行圖像替換褪色等的思考

Question

對這種方法有什么想法嗎？ 任何反饋，不勝感激。 tryFindUserName是一個AJAX調用，它返回簡單的true或false。 我擔心的是，它還不夠整潔，也無法很好地擴展。 另外，我應該檢查狀態更改，因為以下代碼始終隱藏並顯示img。

還有對圖像路徑的硬編碼的想法嗎？

// 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

使用CSS進行樣式設置，而不是使用javascript。

使用javascript，您可以淡入/淡出某個元素，或在某些用戶操作上切換類，等等。 但是褪色也可以通過CSS過渡來完成。 （ 示例 ）。

在您的情況下，我將創建一個同時具有兩種狀態和動畫background-position