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();
    });
});

缩短JQuery动画代码

1 个答案: