2

私は素晴らしいアニメーションを持っていますが、テキストをフェードアウトしてから別の関数を実行することで、このアニメーションを逆にしようとしています。このページが読み込まれると、次の実行...

 $(document).ready(function () {

      dream();
      setTimeout(runul(), 8000, function() {showVideo()});

    });

ドリーム機能はボディ背景に泡を発生させます。

 function dream() {
        //calculating random color of dream
        if (animation_stopped) return;
        var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';

        //calculating random X position
        var x = Math.floor(Math.random() * $(window).width());

        //calculating random Y position
        var y = Math.floor(Math.random() * $(window).height());

        //creating the dream and hide
        drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide();

        //appending it to body
        $(document.body).append(drawingpix);

        //styling dream.. filling colors.. positioning.. showing.. growing..fading
        drawingpix.css({
            'background-color': color,
            'border-radius': '100px',
            '-moz-border-radius': '100px',
            '-webkit-border-radius': '100px',
            top: y - 14,    //offsets
            left: x - 14 //offsets
        }).show().animate({
            height: '500px',
            width: '500px',
            'border-radius': '500px',
            '-moz-border-radius': '500px',
            '-webkit-border-radius': '500px',
            opacity: 0.1,
            top: y - 250,    //offsets
            left: x - 250
        }, 3000).fadeOut(2000);

        //Every dream's end starts a new dream
         window.setTimeout('dream()', 200);
    }

dream 関数の実行中に、テキストの入力を開始する runul() 関数を実行します。

 function runul() {
        jQuery("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");

        // Trigger events
        jQuery(".stop").click(function () {
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function () {
            jQuery("#ticker").trigger("play");
            return false;
        });

    }

runul() アニメーションが完了したら、showVideo 関数を実行したいと思います。この関数で、入力したテキストをフェードアウトしてから、div でラップされた iframe をフェードインしたいと考えています。

 function showVideo() {
        $('#divFade').fadeOut(3000);
        animation_stopped = true;
        $(typetext).css('color', 'black');
        $("body").animate({ backgroundColor: "#ffffff" }, 3000);
        $('#divVideos').fadeIn('slow');
       // Animation complete.
        $("#iVideos").prop('src', 'Videos/Quick Start Intro_player.html');
        return false;
      };

runul() の完了後に showVideo を実行するにはどうすればよいですか?

助けてくれてどうもありがとう

4

1 に答える 1

4

「showVideo」をコールバック関数として渡す必要があります。

setTimeout( function() {runul(showVideo)},8000);

function runul(callback) {
        jQuery("#ticker").ticker({
            cursorList: " ",
            rate: 50,
            delay: 18000
        }).trigger("play").trigger("stop");

        // Trigger events
        jQuery(".stop").click(function () {
            jQuery("#ticker").trigger("stop");
            return false;
        });

        jQuery(".play").click(function () {
            jQuery("#ticker").trigger("play");
            return false;
        });

        callback();

    }

jquery deferredを使用することもできます。具体的にはwhen関数

于 2012-11-13T15:35:20.980 に答える