背景颜色属性向上滑动答案

【问题标题】：Background color property slide up背景颜色属性向上滑动
【发布时间】：2011-04-07 16:21:34
【问题描述】：

问题在 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>

【问题讨论】：

标签： javascript jquery css jquery-animate background-color

【解决方案1】：

这是一个使用带有两个 div 的切换功能的示例：http://jsfiddle.net/SmAHU/（大致基于 Nick011 的回复）

【讨论】：

它有效，但不幸的是，我不再需要它了。不过还是谢谢。

【解决方案2】：

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

<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 上的文档。

【讨论】：

两个 div 和 slideUp() 工作，但你应该校对你的代码（或至少你的 CSS，其中有 'z-index='）。z-index 根本不需要，但我无法让 slideDown() 工作。