试图让 JQuery 动画的时间正确

Posted 2023-05-08

【中文标题】试图让 JQuery 动画的时间正确

【英文标题】：Trying to get the timing on a JQuery animation correct

【发布时间】：2012-09-19 21:26:40

【问题描述】：

在现有的 Rails 应用程序上工作，但对 JQuery 不太熟悉。现在正在尝试修改不同渐变的时间，以便它们按顺序进入，而不是一次全部进入。即使在对延迟、窗口超时等进行了广泛的重新配置之后，我也无法看到任何可察觉的时间变化。任何人都可以帮忙吗？这是原始代码。

谢谢！

- content_for :scripts do
    = javascript_include_tag 'jquery.easing.1.3', 'jquery.slides'

:javascript
    $(document).ready(function()
        $('#splash-video').on('ended', function() 
            $('#splash').hide();
            //window.setTimeout(function() 
                $('#post-splash').show();
            //,500);
            $('#slides').slides(
                play: 8000,
                pause: 5000,
                hoverPuase: true,
                paginationClass: 'slides-pagination',
                effect: 'fade',
                fadeSpeed: 1200,
                fadeEasing: 'easeOutQuad',
                /*animationStart: function(current) 
                    //$('#slide-caption-' + (current+1)).fadeIn(2500);
                    console.log('animationStart on slide: ', current);
                ,
                animationComplete: function(current) 
                    window.setTimeout(function() 
                        $('#slide-caption-' + (current+1)).fadeIn(4000);
                        $('#slide-caption-' + (current)).fadeOut(1200);
                    ,6800);
                */
            );
        );
        /*window.setTimeout(function() 
            $('#splash').hide();
        ,4500);
        window.setTimeout(function() 
            $('#post-splash').show();
        ,5500);*/
        //$('video,audio').mediaelementplayer( alwaysShowControls: false );

        //$('.container.front-end h1').html($('.container.front-end h1').html().replace('&amp;', '<div class="h1-specialchar">&amp;</div>'));
        /*$('#fade1').delay(700).fadeTo(700, 1, function () 
            $('#fade2').fadeTo(700, 1, function () 
                $('#fade3').removeClass('transparent').addClass('fadeInRight');
            );
        );*/
        //$("#fade2 p").each(function() 
        //   $(this).addClass('animated transparent');
        //);

        $("#fade2 p").addClass("animated");
        $('#fade1').delay(700).fadeTo(700, 1);
        window.setTimeout(function() 
            $("#fade2 p").each(function(index) 
                $(this).delay(150*index).fadeTo(0, 1, function() 
                    $(this).addClass("fadeInDownFaster");
                );
            );
        ,800);
        window.setTimeout(function() 
            $('#slides').removeClass('transparent').addClass('fadeInRight');
        ,1800);
    );

这看起来是不是更近了一点？

感谢您的回答。这看起来正确吗？至少到达那里？

$("#fade2 p").addClass("animated");'
        window.setTimeout(function() 
                $('#fade1').delay(200).fadeTo(500, 1, function() 
                    $("#fade2 p").each(function(index) 
                    $(this).delay(150*index).fadeTo(400, 1, function() 
                        $(this).addClass("fadeInDownFaster");
            );
        ,800);
        window.setTimeout(function() 
            $('#slides').removeClass('transparent').addClass('fadeInRight');
        ,1800);
    );

【参考方案1】：

如果你在fadeto的回调中添加淡入淡出，它将在检查这个例子http://jsfiddle.net/5NPDD/后执行

$('#fade1').fadeTo(500, 0, function() 
    $('#fade2').fadeTo(500, 0, function() 

    );
);​

【讨论】：

感谢您的洞察力。稍微修改了代码。有什么想法吗？