我的JQuery脚本有几个问题
A few problems with my JQuery script
我从昨天开始学习JavaScript，这个(http://jsfiddle.net/TheDevil/qwyctd82/5/)是JSFiddle链接到我的'in-complete' html
HTML
<div id = "square" class = "square" onclick = "beginScript()"></div><br />
<p id = "begin" class = "fontStyle">click the square to begin!</p>
<div id = "squarePos">
<div id = "sq1" class = "square" onclick = "fncSq1()"></div>
<div id = "sq2" class = "square" onclick = "fncSq2()"></div>
<div id = "sq3" class = "square" onclick = "fncSq3()"></div>
<div id = "sq4" class = "square" onclick = "fncSq4()"></div>
</div>
div.wrapper {
width: 800px;
height: 800px;
margin: 20px auto;
}
.fontStyle {
font-family: "Lucida Console", Monospace;
font-weight: bold;
font-size: 30px;
text-align: center;
text-transform: capitalize;
vertical-align: middle;
}
p#begin {
opacity: 0;
}
div.square {
font-family: "Courier New", Monospace;
display: flex;
color: white;
border: 5px solid #ffaa00;
height: 190px;
width: 190px;
justify-content: center;
align-items: center;
background-color: #ffaa00;
opacity: 0;
margin: auto;
cursor: pointer;
}
#squarePos {
position: fixed;
}
.square:hover {
background-color: #ffcc00;
border-color: #ffcc00;
}
.square:active {
background-color: #ff8800;
border-color: #ff8800;
}
.removeLinkEffect:hover, .removeLinkEffect:active {
background-color: #ffaa00;
border-color: #ffaa00;
cursor: default;
}
(function (d) { //* the following script is taken from the source = http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor
d.each(["backgroundColor", "borderBottomColor", "borderLeftColor", "borderRightColor", "borderTopColor", "color", "outlineColor"], function (f, e) {
d.fx.step[e] = function (g) {
if (!g.colorInit) {
g.start = c(g.elem, e);
g.end = b(g.end);
g.colorInit = true
}
g.elem.style[e] = "rgb(" + [Math.max(Math.min(parseInt((g.pos * (g.end[0] - g.start[0])) + g.start[0]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[1] - g.start[1])) + g.start[1]), 255), 0), Math.max(Math.min(parseInt((g.pos * (g.end[2] - g.start[2])) + g.start[2]), 255), 0)].join(",") + ")"
}
});
function b(f) {
var e;
if (f && f.constructor == Array && f.length == 3) {
return f
}
if (e = /rgb'('s*([0-9]{1,3})'s*,'s*([0-9]{1,3})'s*,'s*([0-9]{1,3})'s*')/.exec(f)) {
return [parseInt(e[1]), parseInt(e[2]), parseInt(e[3])]
}
if (e = /rgb'('s*([0-9]+(?:'.[0-9]+)?)'%'s*,'s*([0-9]+(?:'.[0-9]+)?)'%'s*,'s*([0-9]+(?:'.[0-9]+)?)'%'s*')/.exec(f)) {
return [parseFloat(e[1]) * 2.55, parseFloat(e[2]) * 2.55, parseFloat(e[3]) * 2.55]
}
if (e = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)) {
return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
}
if (e = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)) {
return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
}
if (e = /rgba'(0, 0, 0, 0')/.exec(f)) {
return a.transparent
}
return a[d.trim(f).toLowerCase()]
}
function c(g, e) {
var f;
do {
f = d.css(g, e);
if (f != "" && f != "transparent" || d.nodeName(g, "body")) {
break
}
e = "backgroundColor"
} while (g = g.parentNode);
return b(f)
}
var a = {
aqua: [0, 255, 255],
azure: [240, 255, 255],
beige: [245, 245, 220],
black: [0, 0, 0],
blue: [0, 0, 255],
brown: [165, 42, 42],
cyan: [0, 255, 255],
darkblue: [0, 0, 139],
darkcyan: [0, 139, 139],
darkgrey: [169, 169, 169],
darkgreen: [0, 100, 0],
darkkhaki: [189, 183, 107],
darkmagenta: [139, 0, 139],
darkolivegreen: [85, 107, 47],
darkorange: [255, 140, 0],
darkorchid: [153, 50, 204],
darkred: [139, 0, 0],
darksalmon: [233, 150, 122],
darkviolet: [148, 0, 211],
fuchsia: [255, 0, 255],
gold: [255, 215, 0],
green: [0, 128, 0],
indigo: [75, 0, 130],
khaki: [240, 230, 140],
lightblue: [173, 216, 230],
lightcyan: [224, 255, 255],
lightgreen: [144, 238, 144],
lightgrey: [211, 211, 211],
lightpink: [255, 182, 193],
lightyellow: [255, 255, 224],
lime: [0, 255, 0],
magenta: [255, 0, 255],
maroon: [128, 0, 0],
navy: [0, 0, 128],
olive: [128, 128, 0],
orange: [255, 165, 0],
pink: [255, 192, 203],
purple: [128, 0, 128],
violet: [128, 0, 128],
red: [255, 0, 0],
silver: [192, 192, 192],
white: [255, 255, 255],
yellow: [255, 255, 0],
transparent: [255, 255, 255]
}
})(jQuery); //* external script ends here
$("#square").animate({ "opacity" : "1" }); // v-- original screen
$("p#begin").animate({"opacity" : "1" });
var sqrs = [
"#sq1",
"#sq2",
"#sq3",
"#sq4"
]
var sqLength = sqrs.length;
var pageInt = 0;
for (i = 0; i < sqLength; i++) {
$("#form"+[i+1]).hide();
$(sqrs[i]).hide();
}
function beginScript() { // function for initial 'square' div
$("#square").addClass("removeLinkEffect");
$("p#begin").fadeOut('slow', function() { // removes 'click here to begin' text
$("#begin").remove(); // complete remove
$(".square").animate({ // transforms initial square
"height" : "40px"
},
1000,
function() {
$(".square").animate({
"width" : "790px"
},
1000,
function() { // v-- launches the View screens(divs)
var loadText = "Loading, Please wait...";
var pageText = "";
$("#square").addClass("fontStyle").html(loadText);
$("#square").animate({
"opacity" : "0"
}, 1000,
function () {
$("#square").remove(); // removes initial square
});
for (i = 0; i < sqLength; i++) { // transforms View divs
$(sqrs[i]).show().animate({
"position" : "static",
"height" : "70px",
"marginTop" : "80px",
"opacity" : "1"
}, 1000);
pageText = "View " + [i+1]; // View #
$(sqrs[i]).addClass("fontStyle").addClass("addLinkEffect").html(pageText);
}
});
});
});
}
function fncSq1() { // function for 'View 1'
checkOpenDivs();
$(sqrs[0]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
$(sqrs[0]).html(
"Text 1"
).animate({ // launches 'View' window
"height" : "290px",
"width" : "790px",
backgroundColor : "#ffffff",
color : "black"
});
$("#form1").show();
});
}
function fncSq2() { // function for 'View 2'
checkOpenDivs();
$(sqrs[1]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
$(sqrs[1]).html("Text 2").animate({ // launches 'View' window
"height" : "290px",
"width" : "790px",
backgroundColor : "#ffffff",
color : "black"
});
$("#form2").show();
});
}
function fncSq3() { // function for 'View 3'
checkOpenDivs();
$(sqrs[2]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
$(sqrs[2]).html("Text 3").animate({ // launches 'View' window
"height" : "290px",
"width" : "790px",
backgroundColor : "#ffffff",
color : "black"
});
$("#form3").show();
});
}
function fncSq4() { // function for 'View 4'
checkOpenDivs();
$(sqrs[3]).addClass("removeLinkEffect").html("Loading...").promise().done(function() {
$(sqrs[3]).html("Text 4").animate({ // launches 'View' window
"height" : "290px",
"width" : "790px",
backgroundColor : "#ffffff",
color : "black"
});
$("#form4").show();
});
}
function checkOpenDivs() { // checks for any other divs that have launched previously
for (i = 0; i < sqLength; i++) {
$(sqrs[i]).removeClass("removeLinkEffect").html("View " + [i+1]).animate({ // returns 'open' divs to original
"position" : "static",
"height" : "70px",
"width" : "790px",
"marginTop" : "80px",
backgroundColor : "#ffaa00",
color : "white"
});
$("#form"+[i+1]).hide();
}
}
我需要以下帮助:
1)加载时间似乎非常长，大约20秒后，我选择了一个"视图"选项卡
2)滚动页似乎不工作
任何帮助将不胜感激!
你的动画有一个1秒的持续时间，我看到大约4个。这是4秒。$ (" .square")。animate({"height": "40px"}， 1000，.... .;"1000"表示动画的持续时间，以毫秒为单位。
你的正方形位置是固定的，这是什么使它看起来好像你的页面没有滚动。你可以完全去掉位置样式，应该没问题。
#squarePos {
position: fixed;
}
至于加载时间，你的动画都运行在1秒超时。您可以缩短超时时间，以加快时间。
相关文章：
- 关于SVG(可缩放矢量图形）的几个问题
- 骨干.js模型中的几个问题
- 关于骨干的几个问题.js
- 需要JS - 几个问题
- 关于编写javascript OOP风格的几个问题
- 关于IE9算子类型的几个问题
- node.js中的几个问题
- 关于innerHTML的几个问题
- 将几个java脚本组合到一个.js文件中，现在具有冲突的onload函数
- 关于理解正则表达式的几个问题
- 关于角形式有几个问题
- 在jQuery/Javascript中生成的几个问题
- 我的JQuery脚本有几个问题
- 关于使用鼠标(移动事件)用quintus引擎绘制线条的几个问题
- 关于CORS和AJAX的几个问题
- 无法读取未定义的值?有几个问题
- Javascript: DOM, appendChild——几个问题
- 关于谷歌地图引擎的几个问题.哪个版本的引擎?API
- 在为几个问题检查了多个复选框后，如何停止检查复选框
- jQuery动画的几个问题
