Javascript 使用jQuery将其他对象移动到位后，淡出一个对象_Javascript_Jquery_Html_Css_Onkeydown

Javascript 使用jQuery将其他对象移动到位后，淡出一个对象

javascript jquery html css

Javascript 使用jQuery将其他对象移动到位后，淡出一个对象,javascript,jquery,html,css,onkeydown,Javascript,Jquery,Html,Css,Onkeydown,我刚开始了解jQuery，我就有了制作一个简单的超级马里奥模仿的想法。我可以用箭头键移动马里奥，我想一旦马里奥移动到位，我就可以将蘑菇淡出，但这似乎并不像我预期的那样有效，如果有人能给我指出正确的方向，我会非常高兴以下是HTML： <!DOCTYPE html> <html> <head> <title>Super Mario!</title> <link rel='stylesheet'

我刚开始了解jQuery，我就有了制作一个简单的超级马里奥模仿的想法。我可以用箭头键移动马里奥，我想一旦马里奥移动到位，我就可以将蘑菇淡出，但这似乎并不像我预期的那样有效，如果有人能给我指出正确的方向，我会非常高兴

以下是HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Super Mario!</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <img class="mushroom" src="http://ih2.redbubble.net/image.6378228.5104/sticker,375x360.u2.png"/>
        <img class="mario" src="http://i1061.photobucket.com/albums/t480/ericqweinstein/mario.jpg"/>
    </body>
</html>

下面是jQuery：

$(document).ready(function() {
    // Keydown function to move mario
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('.mario').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                $('.mario').animate({top: "-=10px"}, 'fast');
                break;
            // Right Arrow Pressed
            case 39:
                $('.mario').animate({left: "+=10px"}, 'fast');
                break;
            // Down Array Pressed
            case 40:
                $('.mario').animate({top: "+=10px"}, 'fast');
                break;
        }
        // On Mario's arrival remove Mushroom
        $(document).on('keydown', '.mario', function(e){
            var x = e.clientX - this.offsetLeft,
                y = e.clientY - this.offsetTop;

            if (x > 300 && x < 400 && y > 200 && y < 300) {
                $('.mushroom').fadeOut('slow');
            }
        });
    });
});

谢谢你的帮助

缺失

$（'.mario'）.css（“顶部”）

它仍然不能工作。我不确定在我移动Mario后是否存储了left和top的css值。@MiklósDenut尝试将事件更改为

keyup

这就是jQuery的这部分现在看起来的样子，但仍然不起作用：

//在Mario到达时删除蘑菇$（文档）。keyup（函数（键）{
if（$（.Mario'）.css（“左”）==“300”&&$（'.mario'）.css（“top”）==“200”）{
$（'.mashroom'）.remove（）；
}
}）；这是一个无法运行的应用程序的演示：
$(document).ready(function() {
    // Keydown function to move mario
    $(document).keydown(function(key) {
        switch(parseInt(key.which,10)) {
            // Left arrow key pressed
            case 37:
                $('.mario').animate({left: "-=10px"}, 'fast');
                break;
            // Up Arrow Pressed
            case 38:
                $('.mario').animate({top: "-=10px"}, 'fast');
                break;
            // Right Arrow Pressed
            case 39:
                $('.mario').animate({left: "+=10px"}, 'fast');
                break;
            // Down Array Pressed
            case 40:
                $('.mario').animate({top: "+=10px"}, 'fast');
                break;
        }
        // On Mario's arrival remove Mushroom
        $(document).on('keydown', '.mario', function(e){
            var x = e.clientX - this.offsetLeft,
                y = e.clientY - this.offsetTop;

            if (x > 300 && x < 400 && y > 200 && y < 300) {
                $('.mushroom').fadeOut('slow');
            }
        });
    });
});

// On Mario's arrival remove Mashroom
$(document).on('keydown', '.mushroom', function() {
    if($('.mario').css("left")=="300" && ("top")=="200") {
        $('.mashroom').animate({left: "+=10px"}, 'fast'); 
    }
});

if($('.mario').css("left")=="300" && $('.mario').css("top")=="200") {
//                                   ^              ^