.fadeIn适用于按键,但不适用于按键



我有两个div,并且我试图一次只显示一个div。当我按下1键时,我希望div1变为fadeIn(如果它还没有(,而div2变为fade Out(如果它没有(。然后,如果我按下2键,就会出现相反的情况;其中div2渐入而div1渐出。我的代码在下面。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#div2").fadeOut();
});
</script>
<script>
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode==49)
$("#div2").fadeOut();
$("#div1").fadeIn();
});
if (e.keyCode==50)
$("#div1").fadeOut();
$("#div2").fadeIn();
});
});
</script>
</head>
<body>
<h1>Fade in div1 by pressing the 1 key.  Fade out div1 and fade in div 2 by pressing the 2 key.</h1>
<div id="div1">1</div>
<div id="div2">2</div>
</body>
</html>

当我使用按钮时,这是有效的,但现在不适用于按键。我做错了什么?

只需语法就可以关注控制台中的错误确保使用您的代码可以获得syntax error

$(document).ready(function(){
$("#div2").fadeOut();
$(document).keydown(function(e){
if (e.keyCode==49){
$("#div2").fadeOut();
$("#div1").fadeIn();
}
if (e.keyCode==50){
$("#div1").fadeOut();
$("#div2").fadeIn();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Fade in div1 by pressing the 1 key.  Fade out div1 and fade in div 2 by pressing the 2 key.</h1>
<div id="div1">1</div>
<div id="div2">2</div>

最新更新