Background color property slide up

问题

The question is in in transitionBackground function. In this case, the function triggers when the up button is pressed on the page.

    <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>

回答1:

Here's an example using the toggle function with two divs: http://jsfiddle.net/SmAHU/ (loosely based on Nick011's reply)

回答2:

Instead of the if statement you'll probably want to use jQuery's .toggle() function as it will allow you to toggle between multiple options, in this case your bg colors. You can't have the green slide up on the blue with one . You need to create a second div and set the display to none. Then onclick toggle between the two layers by using the slide and hide functions.

<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>

This probably won't run if used verbatim, but should provide you a starting point at least. I'd review the documentation on jquery.com.

来源：https://stackoverflow.com/questions/3633115/background-color-property-slide-up

标签

javascript

jquery

css

jquery-animate

background-color