Сокращение анимационного кода 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();
    });
});