Свойство цвета фона скользит вверх - PullRequest
Новая
       9

Свойство цвета фона скользит вверх

0 голосов
/ 03 сентября 2010

Вопрос в функции 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>

Ответы [ 2 ]

2 голосов
/ 01 октября 2010

Вот пример использования функции переключения с двумя делителями: http://jsfiddle.net/SmAHU/ (свободно на основе ответа Nick011)

0 голосов
/ 03 сентября 2010

Вместо оператора if вы, вероятно, захотите использовать функцию .toggle () jQuery, поскольку она позволит вам переключаться между несколькими вариантами, в данном случае ваши цвета 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.

...