縮短JQuery的動畫代碼

Question

我是新來的開發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> 

Answer 1

你可以把它短得多

var colors = new Array('blue', 'green', 'orange', 'yellow', 'blank'); 

$(".colorblue, .colorgreen, .colororange, .coloryellow .colorblank") 
.mouseup(function(){ 
    var $phone = $("#phone"), $this = $(this), $body = $("body"), idx, i; 

    $phone.fadeTo('fast', 0.1, "swing"); 
    $phone.fadeTo('fast', 0.1, "swing").delay(50).queue(function(next){ 
     $(this).fadeTo('fast', 1, "swing"); 
     next(); 
    }); 

    for(i = 0; i < colors.length; i ++) { 
     if($this.hasClass('color' + colors[i])) 
      idx = i; 
     else $body.removeClass(colors[i]); 
    } 

    $body.delay(400).queue(function(next) { 
     $(this).addClass(colors[idx]); 
     next(); 
    }); 
}); 

$(".screenblue, .screengreen, .screenorange, .screenyellow, .screenblank") 
.mouseup(function(){ 
    var $menu = $("#menu"), $this = $(this), $wrapper = $("#wrapper"), idx, i; 
    $menu.fadeTo('fast', 0.1, "swing"); 
    $menu.fadeTo('fast', 0.1, "swing").delay(50).queue(function(next){ 
     $(this).fadeTo('fast', 1, "swing"); 
     next(); 
    }); 

    for(i = 0; i < colors.length; i ++) { 
     if($this.hasClass('screen' + colors[i])) 
      idx = i; 
     else $wrapper.removeClass('menu' + colors[i]); 
    } 

    $wrapper.delay(400).queue(function(next){ 
     $(this).addClass('menu' + colors[idx]); 
     next(); 
    }); 
});