Question

问题出在transitionBackground函数中。在这种情况下，当在页面上按下向上按钮时，该功能会触发。

    <html>
    <head>
    <title>Case: Background Transitions</title>
    <script src="jquery/jquery.js"></script>
    <script>
      $(
        var transitionBackground = function (){
          if ($(div).css("background") === "blue"){
            //convert to green by having the green background start at the bottom, 
            //and slide up (over say, a period of 1 second)
            //I'll up vote a pure-css, pure-js, or a jquery answer, 
            //but I prefer jquery or pure-css answers.
            //Thanks in advance.
          } else {
            //convert back to blue if pressed again.
            //you don't have to do this;
          }
        };

        var arrowDown = {left:false, right:false, up:false, down:false};
        var arrow = {left: 37, up: 38, right: 39, down: 40 };

        $(document.documentElement).keydown(function (e) {  //a key was clicked
          var keyCode = e.keyCode || e.which

          switch (e.keyCode) {
            case arrow.up:  //the up key was clicked/pressed
              if (arrowDown.up === false){  //tell if clicked or pressed
                transitionBackground();
              }
              arrowDown.up = true
              break;
            default: //other keys
              return true;
              break;
          }
          return false;  //stop default behavior
        });

        $(document.documentElement).keyup(function (e) { //a key was relased
          var keyCode = e.keyCode || e.which

          switch (e.keyCode) {
            case arrow.up:  //the up key was released
              arrowDown.left = false;
              break;
            default: //other keys
              return true;
              break;
          }
          return false; //stop default behavior
        });
      );
    </script>
  </head>
  <body>
    <div style="height: 3em; width: 3em; background:blue"></div>
  </body>

Answer 1

以下是使用带有两个div的切换功能的示例：http://jsfiddle.net/SmAHU/（松散地基于Nick011的回复）

Answer 2

而不是if语句你可能想要使用jQuery的.toggle（）函数，因为它允许你在多个选项之间切换，在这种情况下你的bg颜色。你不能用绿色滑动蓝色。您需要创建第二个div并将显示设置为none。然后使用幻灯片和隐藏功能在两个图层之间切换。

<script type="text/javascript">
    var transitionBackground = function (){
        $(div).toggle(
            function(){
                $(div).hide();   
            },
            function(){
                $(div).slideUp();
            }
        );
    });
</script>
<div id="container">
<div style="height: 3em; width: 3em; background:blue; position:absolute; z-index:1"></div>
<div style="height: 3em; width: 3em; background:green; position:absolute; z-index=2; display:none;"></div>
</div>

如果逐字使用，这可能不会运行，但至少应该为您提供一个起点。我将在jquery.com上查看文档。

背景颜色属性向上滑动

2 个答案: