背景颜色属性向上滑动

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

  Case: Background Transitions   $( 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 }); );    

这是一个使用带有两个div的toggle函数的示例: http : //jsfiddle.net/SmAHU/ (松散地基于Nick011的回复)

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

  

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