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

フェードをfadetoのコールバックに追加すると、この例を確認した後に実行されますhttp://jsfiddle.net/5NPDD/

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

    });
});​
于 2012-09-28T01:53:21.707 に答える