jquery - 通过 jQuery 在 keydown 上更改字体颜色

Question

我试图通过 jQuery 使用 wasd 键在屏幕上移动一个圆圈。我有可以在屏幕上移动圆圈的代码，但我也试图在按下按键时点亮它们。我似乎无法让点亮代码工作......有什么建议吗？一旦用户按下颜色，颜色应该只显示很短的时间。

http://jsfiddle.net/kUf5q/

这是我的 jQuery：

$(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('#box').animate({left: "-=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        case 83:
            $('#box').animate({top: "+=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        case 87:
            $('#box').animate({top: "-=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        case 68:
            $('#box').animate({left: "+=10px"}, 'fast');
            $('span').css('color: red;');
            break;
        default:
            break;
    }
});
});

Answer 1

创建一个突出显示功能，其中必须突出显示key的键和delay必须突出显示的时间量。

var highlight = function(key, delay) {
    $('.button.' + key + ' span').css('color', 'red');
    setTimeout(function() {
        $('.button.' + key + ' span').css('color', 'white');
    }, delay);
}

工作演示

Answer 2

我为您制作了一个自定义函数来更改颜色调用changeColor(className)，它的工作原理如下：

function changeColor(spanClass) {
    //Change the pressed key to "red"
    $("div." + spanClass + " span").css("color", "red");

    //After half-second, change it back to "white"
    setTimeout(function() {
        $("div." + spanClass + " span").css("color", "white");
    }, 500);
}

现在，每次按下按钮时，传入被按下的按钮：

case 65:
    $('#box').animate({left: "-=10px"}, 'fast');
    changeColor("a");
    break;

工作演示：http: //jsfiddle.net/kUf5q/1/

Answer 3

你可以这样做：

$("span").css('color','red');

或者

$("span").attr("style","color:red;");

另外，请注意，这将更改所有跨度的颜色，请考虑使用 id 或类来选择它们。

Answer 4

工作演示，很简单，没有额外的方法，也没有在 keyup 上突出显示。顺便说一句，这点亮了键本身，而不是字符的字体。

http://jsfiddle.net/EaQWd/23/

将 id 添加到按钮 div 的：

            <div id="boxW" class="w button"><span>W</span></div>
            <div id="boxA" class="a button"><span>A</span></div>
            <div id="boxS" class="s button"><span>S</span></div>
            <div id="boxD" class="d button"><span>D</span></div>

然后使用这个jquery：

$(document).ready(function() {
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            case 65:
                $('#box').animate({left: "-=10px"}, 'fast');
                $('#boxA').animate({backgroundColor: "red"}, 'fast');
                break;
            case 83:
                $('#box').animate({top: "+=10px"}, 'fast');
                $('#boxS').animate({backgroundColor: "red"}, 'fast');
                break;
            case 87:
                $('#box').animate({top: "-=10px"}, 'fast');
                $('#boxW').animate({backgroundColor: "red"}, 'fast');
                break;
            case 68:
                $('#box').animate({left: "+=10px"}, 'fast');
                $('#boxD').animate({backgroundColor: "red"}, 'fast');
                break;
            default:
                break;
        }
    });
    $(document).keyup(function(key) {
        switch(parseInt(key.which,10)) {
            case 65:
                $('#boxA').animate({backgroundColor: "black"}, 'fast');
                break;
            case 83:
                $('#boxS').animate({backgroundColor: "black"}, 'fast');
                break;
            case 87:
                $('#boxW').animate({backgroundColor: "black"}, 'fast');
                break;
            case 68:
                $('#boxD').animate({backgroundColor: "black"}, 'fast');
                break;
            default:
                break;
        }
    });
});

此外，必须添加 jquery-ui 才能使其工作。希望这可以帮助！

Answer 5

工作演示

  function chnage_bg_color(class_button) {
        $('.button.' + class_button).css('background-color', '#ccc').find('span').css('color','red');
        setTimeout(function () {
            $('.button.' + class_button).css('background-color', '#000').find('span').css('color','#fff');
        }, 100);
    }