通过 jQuery 对图像替换褪色等的思考答案

【问题标题】：Thoughts on image replacement fading etc. via jQuery通过 jQuery 对图像替换褪色等的思考
【发布时间】：2013-02-26 15:36:23
【问题描述】：

对这种方法有什么想法吗？非常感谢任何反馈。 tryFindUserName 是一个 AJAX 调用，它返回一个简单的真或假。我担心的是它不够整洁，也没有很好地扩展。另外，我是否应该检查状态变化，因为下面的代码总是隐藏并显示 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();
});

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc

【解决方案1】：

使用 CSS 进行样式设置，而不是 javascript。

使用 javascript，您可以淡入/淡出元素，或在某些用户操作上切换类等等。但是褪色也可以通过 CSS 过渡来完成。 (Example)。

在你的情况下，我会创建一个具有两种状态的图像，并为 background-position 设置动画

【讨论】：