jQuery UI switchClass提供了非常不稳定的动画，替代品？

时间：2013-08-13 23:42:07

标签： jquery jquery-ui addclass

使用jQuery UI switchClass方法，它会爆炸！动画不稳定，至少可以说是不可取的。我正在寻找一种方法来完成相同的代码，可能更快，更清洁，更流畅的动画。而且最好不使用jQuery UI。

参考位于页面的<head>标记：

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

我的jQuery代码：

$(window).load(function() {
    $(".container").removeClass("hidden");
    $(".container").css({'height':  $(".can2").height()});
    scrollToElement($("#main_menu"));
    var sDelay = 0,
        sDuration = 2000;

    var numCandidates = $(".candidate").length;
    $(".candidate").delay(500).each(function(index) {
        var i = parseInt(index) >= 10 ? ++i : 0;
        var $this = $(this);

        if (i > 0)
        {
            $(this).addClass('can' + i);
            var curIndex = 0;
            sDelay = sDelay + 2000;
        }
        else
        {
            var curIndex = (numCandidates - index); // 13, 12, 11, 10, 9, 8, 7, 6, 5, 4
        }

        $(this).css({ left: $(this).offset().left }).delay(sDelay).animate({
            left: i == 0 ? "-10%" : 0
        }, {
            duration: sDuration,
            specialEasing: {
                width: "linear",
                left: i == 0 ? "linear" : "easeOutBounce"
            },
            complete: function() {
                if (i == 0)
                {
                    for (var s=curIndex; s<13; s++)
                    {
                        // alert(".can" + (s+1));
                        $(".can" + (s+1)).switchClass("can" + (s+1), "can" + s, 350, "easeInOutCirc");
                    }
                    $this.addClass("can13", 350, "easeInOutCirc");
                }
                else
                {
                    $(".name").eq(parseInt($(this).data("index"))).text($(this).data("name")).fadeIn('2000');
                }
            }
        });
        sDelay += 1000;
    });
});

HTML结构：

<div class="fullwidth">
    <div class="container hidden">
        <div class="candidate" data-name="Julia Richards"><img class="floatcenter" src="images/head1.png" alt="" /></div>
        <div class="candidate" data-name="Mark Anthony"><img class="floatcenter" src="images/head2.png" alt="" /></div>
        <div class="candidate" data-name="John Davis"><img class="floatcenter" src="images/head3.png" alt="" /></div>
        <div class="candidate" data-name="Cheung Lee"><img class="floatcenter" src="images/head4.png" alt="" /></div>
        <div class="candidate" data-name="Steve Austin"><img class="floatcenter" src="images/head5.png" alt="" /></div>
        <div class="candidate" data-name="Richard Baxter"><img class="floatcenter" src="images/head6.png" alt="" /></div>
        <div class="candidate" data-name="Christina Oakfield"><img class="floatcenter" src="images/head7.png" alt="" /></div>
        <div class="candidate" data-name="Derek Brown"><img class="floatcenter" src="images/head8.png" alt="" /></div>
        <div class="candidate" data-name="Abigail Harris"><img class="floatcenter" src="images/head9.png" alt="" /></div>
        <div class="candidate" data-name="Cindy Krause"><img class="floatcenter" src="images/head10.png" alt="" /></div>
        <div class="candidate can1" data-name="Phillip Wright" data-index="0"><img class="floatcenter" src="images/head11.png" alt="" /></div>
        <div class="candidate can2" data-name="Brendan Johnson" data-index="1"><img class="floatcenter" src="images/head12.png" alt="" /></div>
        <div class="candidate can3" data-name="Chris Lawler" data-index="2"><img class="floatcenter" src="images/head13.png" alt="" /></div>
        <!--// Candidate Names //-->
        <div class="name mission_gothic_reg" style="margin-left: 5%;"></div>
        <div class="name mission_gothic_reg featured_name" style="margin-left: 39%;"></div>
        <div class="name mission_gothic_reg" style="margin-left: 71%;"></div>
    </div>
    <br class="clear" />
</div>

CSS：

.fullwidth {
    width: 100%;
}
.hidden {
    display: none;
}
.container {
    margin: 6em auto 2em; 
    width: 80%; 
    position: relative; 
    display: block;
}
.featured_name {
    bottom: -1em;
    margin-left: 30%;
    width: 40%;
    font-size: 1.5em;
    opacity: 1;
    z-index: 13;
    text-shadow: 0 0 .2em rgba(255, 255, 255, 0.8);
}
.name {
    position: absolute;
    bottom: .8em; 
    text-align: center; 
    opacity: .6; 
    width: 25%; 
    height: 1.5em; 
    line-height: 1.5em; 
    font-size: 1.2em;
    z-index: 13;
    display: none;
}
.candidate {
    position: absolute;
    width: 35%;
    height: auto;
    border-radius: 50%;
    right: -40%;
    border: .1em solid white;
    -moz-box-shadow: 0px 0px .2em rgba(0,0,0,0.8);
    -webkit-box-shadow: 0px 0px .2em rgba(0,0,0,0.8);
    box-shadow: 0px 0px .2em rgba(0,0,0,0.8);
}

.can4, .can5, .can6, .can7, .can8, .can9, .can10, .can11, .can12, .can13 {
    left: -10%;
}

.can13 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 3%;
    z-index: 9;
}

.can12 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 20%;
    z-index: 8;
}

.can11 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 33%;
    z-index: 7;
}

.can10 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 43%;
    z-index: 6;
}

.can9 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 52%;
    z-index: 5;
}

.can8 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -14%;
    margin-left: 61%;
    z-index: 5;
}

.can7 {
    width: 10% !important;
    opacity: 0.2;
    margin-top: -13%;
    margin-left: 70%;
    z-index: 6;
}

.can6 {
    width: 12% !important;
    opacity: 0.3;
    margin-top: -12%;
    margin-left: 79%;
    z-index: 7;
}

.can5 {
    width: 15% !important;
    opacity: 0.4;
    margin-top: -10%;
    margin-left: 89%;
    z-index: 8;
}

.can4 {
    width: 22% !important;
    opacity: 0.6;
    margin-top: -5%;
    margin-left: 98%;
    z-index: 9;
}

.can3 {
    margin-top: 0;
    margin-left: 66%;
    opacity: 0.8;
    width: 35% !important;
    z-index: 10;
}

.can2 {
    margin-left: 30%;
    width: 40% !important;
    z-index: 11;
    opacity: 1;
    margin-top: 1em;         
}

.can1 {
    margin-left: 0;
    width: 35% !important;
    z-index: 10;
    opacity: 0.8;
    margin-top: 0;
}

最终结果的图片： After animation is complete

使用.switchClass方法通过jQuery UI实现此目的的URL：http://opportunityfinance.net/Test/newest_conference-2013/meetcandidates.html

有没有一种方法可以做到更清洁，可能更少的代码（但这对我来说并不重要），使用更少的系统资源，以及更整洁的动画和/或常量动画？或者根本不使用jQuery UI，因为jQuery UI .switchClass方法有时会跳过一个元素。

更新：

将jQuery代码更改为以下内容......这仍然可以改进性能吗？

$(window).load(function() {
    $("#container").removeClass("hidden");
    $("#container").css({'height':  $(".can2").height()});
    scrollToElement($("#main_menu"));
    var sDelay = 0,
        sDuration = 2000;
    var xName = 0;

    var numCandidates = $(".candidate").length;
    $("#container .candidate").delay(500).each(function(index) {
        var i = index >= 10 ? ++i : 0;
        var $this = $(this);

        if (i > 0)
        {
            $this.addClass('can' + i);
            var curIndex = 0;
            sDelay = sDelay + 1500;
        }
        else
        {
            var curIndex = (numCandidates - index); // 13, 12, 11, 10, 9, 8, 7, 6, 5, 4
        }

        $(this).css({ left: $this.offset().left }).delay(sDelay).animate({
            left: i == 0 ? "-10%" : 0
        }, {
            duration: sDuration,
            specialEasing: {
                width: "linear",
                left: i == 0 ? "linear" : "easeOutBounce"
            },
            complete: function() {
                if (i == 0)
                {
                    for (var s=curIndex; s<13; s++)
                    {
                        // alert(".can" + (s+1));
                        $("#container .can" + (s+1)).switchClass("can" + (s+1), "can" + s, 400, "easeInOutCirc");
                    }
                    $this.addClass("can13", 400, "easeInOutCirc");
                }
                else
                {
                    ++xName;
                    $("#name" + xName).text($this.data("name")).fadeIn('2000');
                }
            }
        });
        sDelay += 650;
    });
});

将HTML更改为指向类name值，而是执行此操作：

<div id="name1" class="mission_gothic_reg" style="margin-left: 5%;"></div>
<div id="name2" class="mission_gothic_reg" style="margin-left: 39%;"></div>
<div id="name3" class="mission_gothic_reg" style="margin-left: 71%;"></div>

此外，在container id值中添加了container的类名，因此我可以引用id而不是类，并将其用作其他类选择器的父级。

更改了CSS因此（删除了.name和.featured_name css规则并添加了以下内容）：

#name2 {
    bottom: -1em;
    margin-left: 30%;
    width: 40%;
    font-size: 1.5em;
    opacity: 1;
    z-index: 13;
    text-shadow: 0 0 .2em rgba(255, 255, 255, 0.8);
}
#name1, #name2, #name3 {
    position: absolute;
    bottom: .8em; 
    text-align: center; 
    opacity: .6; 
    width: 25%; 
    height: 1.5em; 
    line-height: 1.5em; 
    font-size: 1.2em;
    z-index: 13;
    display: none;
}

我还能做些什么来改进这个动画吗？因为它对我来说似乎有点滞后......

另外，我注意到宽度有点偏斜，因为它的宽度设置为向下。这意味着高度有点下降，但是过了一会儿，它会回到正确的宽度和高度，我能做些什么吗？

0 个答案:

没有答案
相关问题
最新问题