背景顏色屬性向上滑動

問題出在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>

來源

2010-09-03 Havvy

下面是一個使用切換功能有兩個div一個例子：http://jsfiddle.net/SmAHU/（鬆散的基礎上Nick011的答覆）

來源

2010-10-01 01:39:14

它的工作原理，但不幸的是，我不再需要它了。儘管如此。 – Havvy 2010-10-14 17:07:07

相反的if語句，你可能想使用jQuery的.toggle（）函數，因爲它可以讓你多個選項之間進行切換，在這種情況下，您的BG顏色。一個人不能讓綠色滑上藍色。您需要創建第二個div並將顯示設置爲無。然後使用幻燈片和隱藏功能在兩個圖層之間進行切換。

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

來源

2010-09-03 07:34:21

兩個div和效果基本show（）的工作，但你應該校對你的代碼（或至少你的CSS，以「Z -index ='在那裏。）z-index根本不需要，但我無法使slideDown（）工作。 – Havvy 2010-09-03 18:04:34

背景顏色屬性向上滑動

回答

相關問題