时间戳

首页 > 解决方案 > .fadeIn 适用于按钮按下，但不适用于按键

javascript - .fadeIn 适用于按钮按下，但不适用于按键

问题描述

我有两个 div，我试图一次只看到一个 div。当我按下 1 键时，我希望 div1 淡入（如果还没有），让 div2 淡出（如果还没有）。然后，如果我按 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>

这在我使用按钮时有效，但现在不适用于按键。我究竟做错了什么？

标签： javascriptjqueryhtmlcss

解决方案

只是语法密切关注控制台的错误，确保你的代码会得到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>

推荐阅读