0

在现有的 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);
    });
4

1 回答 1

1

如果将淡入淡出添加到淡入淡出的回调中，它将在检查此示例http://jsfiddle.net/5NPDD/后执行

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

    });
});​
于 2012-09-28T01:53:21.707 回答