文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >缩短JQuery动画代码

问缩短JQuery动画代码
EN

Stack Overflow用户
提问于 2012-01-16 18:50:59
回答 1查看 155关注 0票数 0

我是开发JQuery代码的新手，我需要一些帮助来缩短以下代码：

代码语言：javascript
复制
    $(".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：

代码语言：javascript
复制
        <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
animation
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-01-16 19:20:37

你可以让它变得更短

代码语言：javascript
复制
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();
    });
});
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/8878942

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档