Question

我正在使用jquery在我的网站首次加载时添加和删除css动画类。我正在使用.animate（）和嵌套5深，在每个回调中使用另一个。由于某种原因，最后一个是双击并使动画css类运行两次。

我已经阅读了jquery文档，但没有找到任何有用的答案。当我删除“expand”类的最深的.animate（）时，其他所有东西仍然按预期工作，所以我不确定发生了什么，并希望有人能指出我正确的方向让这个正常工作

您可以在http://www.holdero.com查看问题，并且在加载页面时，它是两次滑动的营销图标。非常感谢任何帮助！

jQuery

function slide_up_titles() {    
    $(".big_text").addClass("bigEntrance");
    $(".big_text").animate({
        opacity: 1  
    }, 1500, function(){
//animation complete
        $(".big_text").removeClass("bigEntrance");
        $(".title_caption").addClass("hatch");
        $(".title_caption").animate({
            opacity: 1  
        }, 1000, function(){
//animation complete
            $(".title_caption").removeClass("hatch");
            $(".pulsate").addClass("slideUp");
            $(".pulsate").animate({
                opacity: 1  
            }, 600, function(){
//animation complete
                $(".pulsate").removeClass("slideUp");
                $(".rotate").addClass("slideUp");
                $(".rotate").animate({
                    opacity: 1  
                }, 600, function(){
//animation complete
                    $(".rotate").removeClass("slideUp");
                    $(".expand").addClass("slideUp");
                    $(".expand").animate({
                        opacity: 1  
                    }, 600, function(){
//animation complete
                        $(".expand").removeClass("slideUp");

                    });
                });
            });
        });

    });
};

HTML

    <div id="mainWrapper">
    <div class="row">
        <div class="col one big_pad"> 
            <p class="text-center armwrestler big_text hidden">STEVEN JAMES HOLDER</p>
            <p class="text-center title_caption hidden">Phoenix, AZ</p>
        </div>
    </div>
</div>
<div class="row full_row bg_copper ">
    <div id="mainWrapper">
        <div class="row">
            <div class="col one_third margin_bottom_mobile">
                <div class="text-center rock txt_tan scroll_design">
                    <i class="fa fa-picture-o fa-5x pulsate txt_tan hidden"></i>
                    <br /><br />
                    <h2 class="hidden pulsate">Design</h2>
                </div>         
            </div>
            <div class="col one_third margin_bottom_mobile">
                <div class="text-center rock txt_tan scroll_development">
                    <i class="fa fa-html5 fa-5x rotate hidden"></i>
                    <br /><br />
                    <h2 class="hidden rotate">Development</h2> 
                </div>                 
            </div>
            <div class="col one_third">
                <div class="text-center rock txt_tan scroll_marketing">
                    <i class="fa fa-thumbs-o-up fa-5x expand hidden"></i>
                    <br /><br />
                    <h2 class="hidden expand">Marketing</h2>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

写的代码是骗人的！

为动画使用类选择器时，找到的每个元素都会进行动画调用。然后，此代码中的每个调用都有一个调用另一个动画的完成调用。看看这是怎么回事？

$('.expand').animate()被召唤4次。完成功能被调用8次。只是在动画完成其600毫秒并删除slideUp类之后，其中一个调用就行了，再次添加slideUp，从而使最后一个展开的slideUp动画加倍。

简单修复：

将$('expand').animate()的持续时间参数设置为约650毫秒。

jquery animate（）回调双击

1 个答案:

简单修复：