-2
這是我想讓它儘可能的乾淨， 我的實際（討厭）腳本乾淨的劇本，我的意思是讓只有一個function所有<span>元素如何做，而不是重複相同的腳本爲每個元素
function editTipA() {
//orders and discribing
jQuery("#editTipA").stop().css({
"opacity": "100",
});
jQuery("#editTipA").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipB() {
//orders and discribing
jQuery("#editTipB").stop().css({
"opacity": "100",
});
jQuery("#editTipB").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipC() {
//orders and discribing
jQuery("#editTipC").stop().css({
"opacity": "100",
});
jQuery("#editTipC").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipD() {
//orders and discribing
jQuery("#editTipD").stop().css({
"opacity": "100",
});
jQuery("#editTipD").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipE() {
//orders and discribing
jQuery("#editTipE").stop().css({
"opacity": "100",
});
jQuery("#editTipE").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipF() {
//orders and discribing
jQuery("#editTipF").stop().css({
"opacity": "100",
});
jQuery("#editTipF").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipG() {
//orders and discribing
jQuery("#editTipG").stop().css({
"opacity": "100",
});
jQuery("#editTipG").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipH() {
//orders and discribing
jQuery("#editTipH").stop().css({
"opacity": "100",
});
jQuery("#editTipH").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipI() {
//orders and discribing
jQuery("#editTipI").stop().css({
"opacity": "100",
});
jQuery("#editTipI").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}
function editTipJ() {
//orders and discribing
jQuery("#editTipJ").stop().css({
"opacity": "100",
});
jQuery("#editTipJ").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}body {
background-color: black;
font-size: 50px;
font-family: cursive;
}
.A {
color: #FF0099;
}
.B {
color: #FF3399;
}
.C {
color: #FF6699;
}
.D {
color: #FF9999;
}
.E {
color: #FFCC99;
}
.F {
color: #FFFF99;
}
.G {
color: #FFFF00;
}
.H {
color: #FFCC00;
}
.I {
color: #FF9900;
}
.J {
color: #FF6600;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><span onmouseover="editTipA()" class="A" id="editTipA" style="opacity: 0">H</span><span onmouseover="editTipB()" class="B" id="editTipB" style="opacity: 0">E</span><span onmouseover="editTipC()" class="C" id="editTipC" style="opacity: 0">L</span><span onmouseover="editTipD()" class="D" id="editTipD" style="opacity: 0">L</span><span onmouseover="editTipE()" class="E" id="editTipE" style="opacity: 0">O</span>
<span onmouseover="editTipF()" class="F" id="editTipF" style="opacity: 0"> W</span><span onmouseover="editTipG()" class="G" id="editTipG" style="opacity: 0">O</span><span onmouseover="editTipH()" class="H" id="editTipH" style="opacity: 0">R</span><span onmouseover="editTipI()" class="I" id="editTipI" style="opacity: 0">L</span><span onmouseover="editTipJ()" class="J" id="editTipJ" style="opacity: 0">D</span>
</p>這樣的事情，所以這裏的
CSS必須做的「Hello World」彩虹樣式和
js功能必須確實適用褪色動畫：
function editTip() {
//orders and discribing
jQuery("#editTip").stop().css({
"opacity": "100",
});
jQuery("#editTip").animate({
//transparency
opacity: 0.01,
//speed
}, 700);
}body {
background-color: black;
}
p {
font-size: 50px;
font-family: cursive;
color: #FF0099;
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
background-image: gradient(linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22));
color:transparent;
-webkit-background-clip: text;
background-clip: text;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body onload="editTip()">
<p>
<span onmouseover="editTip()" class="A" id="editTip" style="opacity: 0">H</span><span onmouseover="editTip()" class="B" id="editTip" style="opacity: 0">E</span><span onmouseover="editTip()" class="C" id="editTip" style="opacity: 0">L</span><span onmouseover="editTip()" class="D" id="editTip" style="opacity: 0">L</span><span onmouseover="editTip()" class="E" id="editTip" style="opacity: 0">O </span>
<span onmouseover="editTip()" class="F" id="editTip" style="opacity: 0">W</span><span onmouseover="editTip()" class="G" id="editTip" style="opacity: 0">O</span><span onmouseover="editTip()" class="H" id="editTip" style="opacity: 0">R</span><span onmouseover="editTip()" class="I" id="editTip" style="opacity: 0">L</span><span onmouseover="editTip()" class="J" id="editTip" style="opacity: 0">D</span></p>
</body>