Question

我正在编写演示文稿，以便在办公室接待区的电视上显示，并需要一些帮助。

我尝试了很多StackOverflow的答案来尝试解决这个问题，但没有一个与我的情况特别相关。我花了天试图解决这个问题，并准备退出。

以下是该脚本的主要部分：

    var startDelay =  5;   //  time in seconds before the directors image sequence begins (default 120 secs)
    var cycleDelay = 10;     // time in seconds after the end of director bios sequence completes and the directors image sequence begins again (default 240 secs)
    var biosDelay =  2;     // time in seconds to show each of the director bios in the carousel (default 10 secs, with total squence time 60 secs)

// start the directors image sequence after a few seconds
    //var tid = window.setTimeout(playDirectors, (startDelay*1000));
    // this was commented out to eliminate interval/timeout problems
    // the presentation is started at the bottom of the script
    // by calling the playDirectors() function immediately, 
    // instead of after the startDelay period

// directors slideshow 
    function playDirectors(){
    //alert("playDirectors");

    // fade out the white client list
        $('#client-qtrotator').fadeTo(500,0, function(){ 
            $("#client-qtrotator").cycle("pause");
         }); 

    // fade up the directors image container then begin image ripple sequence
        $("#directors").fadeTo(500,1,imgFader);
    };

// begin directors image ripple sequence
    function imgFader(){ 
        // label each photo using the alt text        
            $('.banner li img').each(function(i){
                var imageAlt = $(this).attr("alt");
                $(this).after("<span class='caption'>"+imageAlt+"</span>");
             });

        var elm = $('#directors ul.banner li');

        $( elm ).each(function( n ) {
            $( this ).delay(500*n).fadeTo(1000,1).delay(5000).fadeTo(1000,0);
            });

        var def = $(elm).promise();
            def.done(
               function () {
                  //alert('done');
                  playDirectorsBios();
            });

    };

// directors bios slideshow 
    function playDirectorsBios(){
        //alert("playDirectorsBios");

        // fade out directors image container
            $("#directors").fadeTo(500,0);

        // fade in the directors bios carousel
            $('#directors-bios').fadeTo(500,1);//.delay(19000).fadeTo(500,0, alert("done!"));

        // begin cycling through the director bios
            $('.cycle-bios').cycle({
                fx: "scrollHorz",
                slides: "> div",
                loop: 1,
                timeout: biosDelay*1000
            });

        // when the bios have finished playing
            $( '.cycle-bios' ).on( 'cycle-finished', function( event, opts ) {
                // alert("bios finished");
                $(this).cycle('pause'); 

                // fade out  the directors bios carousel
                $('#directors-bios').fadeTo(500,0, function() {
                       // animation complete
                       // $('#client-qtrotator').delay(1000).fadeTo(500,1);
                       $('.cycle-bios').cycle('destroy');

                    var def2 = $('#directors-bios').delay(cycleDelay*1000).promise();
                        def2.done(
                           function () {
                              //alert('done bios');
                              playDirectors();
                        });

                // fade the cloud back in
                    $("#myCanvasContainer").delay(500).fadeTo(2000,1);

                // fade the client list back up
                    $('#client-qtrotator').delay(1000).fadeTo(500,1, function(){ 
                        $("#client-qtrotator").delay(500).cycle("resume"); // resume the client list cycle
                 });  

            });
    };

// begin the presentation by playing the directors image slideshow
playDirectors();

请查看此处的当前迭代： http://duncanmcphail.com.au/tv2.shtml

我已经尝试了“jquery-timing”，但没有太大的成功 - tbh，我想我只是在引入新的问题...... :(

这是演示序列的 tl; dr version ...

淡出大白客户列表
逐个淡入导演的图像，每次按住5秒钟，然后淡出。
淡入导演bios，并开始滑动旋转木马循环
在最后一次生物
再次开始导演图像序列之前等待几秒钟
从步骤1开始重复

这是一个冗长的细分应该发生的事情......

演示文稿有几个要素 - 忽略顶部区域，“我们的专业服务......”循环播放，底部区域的RSS提要结束。

我正在使用 Cycle2 脚本来处理多个列表项的效果，fadeTo优先于fadeIn和fadeOut来处理主要元素并且不在序列中。

在中间区域，我正在循环浏览大白文本中的客户名称列表 - 这很好用。

然后，在startDelay期后，我淡出白名，暂停该循环，然后淡出一个容器，其中包括每个公司董事的图像列表。

每个导演的图像淡入，持续5秒，然后淡出，产生涟漪效应。

当最后一个导演的图像淡出时，我淡出容器并立即淡出另一个容器，其中包括每个导演的动画旋转木马和他们的bios。

当bios序列完成时，其容器淡出，客户端名称淡入淡出并恢复循环，并开始cycleDelay，以在导演图像序列再次运行之前推迟。

到目前为止，我认为我已经将所有内容都链接正确但我无法解决导演图像序列的问题。

在导演的图像序列的两个循环之后，接着是bios序列，图像的第三个循环开始，除了这个时间，而不是正常播放的连锁效果，第一个列表图像开始淡化为第二个列表图像开始淡出，产生交错效果，应该是平滑的波纹。随着演示在每个序列中循环，这会继续变得更糟。

我认为这个序列是反复触发的，因此会运行多个实例 - 在Chrome上进行测试，最终浏览器会崩溃。

我已尝试过从setInterval和setTimeout到when()，promise()，done()等等所有内容，问题仍然存在。我的知识不足以确定失败的地点或原因，所以我最后的办法是咨询一些专家，希望他们能够发现我的问题或提出另一种方法来做到这一点。

感谢您的阅读。

更新

我已经重写了90％的脚本，已经使用 jquery-timing 创建了这个：

$('#directors ul.banner li').each($).animate({ opacity:1 },500,$).wait(event).all().wait(3000).each($).animate({ opacity:0 },500,$);

基本上，每个图像淡出超过500毫秒，等待3000毫秒，然后淡出超过500毫秒 - 然后我需要在最后一个图像淡出后启动我的下一个功能。

完成http://creativecouple.github.io/jquery-timing/documentation/处的文档和示例后，一旦动画完成，我就无法触发功能。

我应该如何重写上面的代码才能实现这个目标？

Answer 1

我在项目中用来帮助我计时和链接序列的是

https://sjp.co.nz/projects/timing-manager/

只需彻底阅读文本，您就可以获得完美的时机。

以下是更详细的文档。

https://github.com/sjp/TimingManager

只需忽略R主题，只需使用普通的javascript即可。它对我有用，所以它也适合你。

链接动画序列以进行无限循环演示

1 个答案: