我是新来的开发jQuery代码和我需要一些帮助缩短如下:缩短JQuery的动画代码
$(".colorblue").mouseup(function(){
$("#phone").fadeTo('fast', 0.1, "swing");
$("#phone").fadeTo('fast', 0.1, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("body").removeClass("blank , green , orange , yellow").delay(400).queue(function(next){
$(this).addClass("blue");
next();
});
});
$(".colorgreen").mouseup(function(){
$("#phone").fadeTo('fast', 0.01, "swing");
$("#phone").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("body").removeClass("blank , blue , orange , yellow").delay(400).queue(function(next){
$(this).addClass("green");
next();
});
});
$(".colororange").mouseup(function(){
$("#phone").fadeTo('fast', 0.01, "swing");
$("#phone").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("body").removeClass("blank , blue , green , yellow").delay(400).queue(function(next){
$(this).addClass("orange");
next();
});
});
$(".coloryellow").mouseup(function(){
$("#phone").fadeTo('fast', 0.01, "swing");
$("#phone").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("body").removeClass("blank , blue , orange , green").delay(400).queue(function(next){
$(this).addClass("yellow");
next();
});
});
$(".colorblank").mouseup(function(){
$("#phone").fadeTo('fast', 0.01, "swing");
$("#phone").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("body").removeClass("yellow , blue , orange , green").delay(400).queue(function(next){
$(this).addClass("blank");
next();
});
});
// Menu changer
$(".screenblue").mouseup(function(){
$("#menu").fadeTo('fast', 0.1, "swing");
$("#menu").fadeTo('fast', 0.1, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("#wrapper").removeClass("menublank , menugreen , menuorange , menuyellow").delay(400).queue(function(next){
$(this).addClass("menublue");
next();
});
});
$(".screengreen").mouseup(function(){
$("#menu").fadeTo('fast', 0.01, "swing");
$("#menu").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("#wrapper").removeClass("menublank , menublue , menuorange , menuyellow").delay(400).queue(function(next){
$(this).addClass("menugreen");
next();
});
});
$(".screenorange").mouseup(function(){
$("#menu").fadeTo('fast', 0.01, "swing");
$("#menu").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("#wrapper").removeClass("menublank , menublue , menugreen , menuyellow").delay(400).queue(function(next){
$(this).addClass("menuorange");
next();
});
});
$(".screenyellow").mouseup(function(){
$("#menu").fadeTo('fast', 0.01, "swing");
$("#menu").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("#wrapper").removeClass("menublank , menublue , menuorange , menugreen").delay(400).queue(function(next){
$(this).addClass("menuyellow");
next();
});
});
$(".screenblank").mouseup(function(){
$("#menu").fadeTo('fast', 0.01, "swing");
$("#menu").fadeTo('fast', 0.01, "swing").delay(50).queue(function(next){
$(this).fadeTo('fast', 1, "swing");
next();
});
$("#wrapper").removeClass("menuyellow , menublue , menuorange , menugreen").delay(400).queue(function(next){
$(this).addClass("menublank");
next();
});
});
我一直在使用这么多$听说是不写jQuery代码的好方法 - 它只是控制一些浏览器动画。
任何帮助表示赞赏。
谢谢。
下面是HTML:
当然,这里是HTML:
<div id="phone"><div id="menu"></div></div><!--phone-->
<div id="centercontainer">
<br class="break" />
</div>
<div id="footer">
<div id="colorchanger" class="device">
<h3>Device</h3>
<a class="colorbox colorblue" href="#" title="Blue "></a>
<a class="colorbox colorgreen" href="#" title="Green "></a>
<a class="colorbox colororange" href="#" title="Orange "></a>
<a class="colorbox coloryellow" href="#" title="Yellow "></a>
<a class="colorbox colorblank reset" href="#" title="Blank "></a>
</div>
<div id="colorchanger" class="screen">
<h3>Screen</h3>
<a class="colorbox screenblue" href="#" title="Blue "></a>
<a class="colorbox screengreen" href="#" title="Green "></a>
<a class="colorbox screenorange" href="#" title="Orange "></a>
<a class="colorbox screenyellow" href="#" title="Yellow "></a>
<a class="colorbox screenblank reset" href="#" title="Blank "></a>
</div>
</div>
*我一直在使用这么多$听到的是不是一个编写JQuery代码的好方法*:不一定。更重要的是,你一遍又一遍地重复同一段代码。您能否提供一个HTML相关部分的例子? – 2012-01-16 10:53:55
您可以通过改变所有的$(“#菜单”)和$(“#电话”)到一个变量,而不是每次都使用jQuery选择开始。 – JNDPNT 2012-01-16 10:57:23