背景颜色属性向上滑动 [英] Background color property slide up
本文介绍了背景颜色属性向上滑动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问题在于transitionBackground函数。在这种情况下，当在页面上按下向上按钮时，功能触发。
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>
推荐答案
这里有一个使用带两个div的toggle函数的示例： http://jsfiddle.net/SmAHU/ （基于Nick011的回复）
Here's an example using the toggle function with two divs: http://jsfiddle.net/SmAHU/ (loosely based on Nick011's reply)
这篇关于背景颜色属性向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
