jquery - Chaining animated sequences for an infinite loop presentation

Keywords:jquery 


Question: 

I'm coding up a presentation for display on a TV in the office reception area and need some help please.

I've tried numerous StackOverflow answers to try and resolve this, but none relate particularly well to my situation. I have spent days trying to solve this and am ready to quit.

Here's the main bulk of the script:

    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();

Please view the current iteration over here: http://duncanmcphail.com.au/tv2.shtml

I have resorted to trying "jquery-timing", but without much success - tbh, I think I'm just introducing new problems... :(

Here's the tl;dr version of the presentation sequence...

  1. Fade out the large white client list
  2. Fade in the directors images, one after the other, hold each for 5 seconds, then fade out.
  3. Fade in the directors bios, and begin the sliding carousel cycle
  4. Fade out the carousel cycle after the last bio
  5. Wait several seconds before beginning the directors images sequence again
  6. Repeat from Step 1

Here's a lengthy breakdown of what is supposed to occur...

There are several elements to the presentation - ignore the top region with "Our professional services..." cycling through, and the bottom region with an RSS feed ticking over.

I'm using the Cycle2 script to handle effects on multiple list items and fadeTo in preference of fadeIn and fadeOut to bring the main elements in and out of the sequence.

In the middle region, I am cycling through a list of client names in large white text - this is working fine.

Then, after a startDelay period, I fade out the white names, pause that cycle, then fade up a container which includes a list of images of each company director.

Each director's image fades in, holds for 5 seconds, then fades out, creating a ripple effect.

When the last director's image fades out, I fade out the container and immediately fade up another container which includes an animated carousel of each director with their bios.

When the bios sequence completes, its container fades out, the client names fade back up and resume cycling, and a cycleDelay begins, to postpone the directors image sequence before it runs again.

So far, I thought I had everything chained correctly but I cannot resolve a problem with the director's images sequence.

After two cycles of the director's images sequence, followed by the bios sequence, the third cycle of the images begins, except this time, instead of the ripple effect playing as normal, the first list image begins to fade back up as the second list image begins its fade out, producing a staggered effect in what should be a smooth ripple. This continues to get worse as the presentation cycles through each sequence.

I think that this sequence is being triggered repeatedly, such that there becomes multiple instances of it running - testing on Chrome, eventually the browser will crash.

I've tried everything from setInterval and setTimeout to when(), promise(), done(), etc. etc. etc. and the problem remains. My knowledge isn't advanced enough to determine where or why this is failing, so my last resort is to consult some experts and hope they can spot my problem or suggest another way to do this.

Thank you for reading.

Update:

I've re-written 90% of the script, having resorted to using jquery-timing to create this:

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

Basically, each image fades up over 500ms, waits for 3000ms and then fades out over 500ms - I then need to fire my next function after the last image has faded out.

After going through the documentation and examples at http://creativecouple.github.io/jquery-timing/documentation/ I have not been able to trigger a function once the animation completes.

How should I rewrite the above code to achieve this?




1 Answer: 

What I used in my project that help me with the timing and chaining sequences is this

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

Just read the text thoroughly and you will achieve perfect timing.

Here is a more detailed documentation.

https://github.com/sjp/TimingManager

Just ignore the R topic and just use plain javascript. It worked for me so It should work for you too.

 

More Articles


objective c - iOS Project Structure for Presentation App

I'm gonna build presentation app, which will present a brandproduct.Presentation will have multiple slides (states) with commonbackground.In some slides I can go back to previous slideMy questions: 1. Do I have to use View Based Application? 2. For each state (slide) should I use separate UIViewCont

android - How to prevent AlertDialog using custom theme from appearing fullscreen?

I am using a custom style for my AlertDialogs, but it is making them appear fullscreen. I've searched around, but I could only seem to find people wanting to make it fullscreen... Here is my style <style name="MyDialog" parent="AlertDialog.AppCompat"> <item name="android:background">

android - Expression of time difference

Given a number of seconds/milliseconds, what is the best method to gracefully/cleanly express this time interval in the user's language, using the Android values/strings.xml API?I am not asking for how to get the days/hours/minutes -- answers for that can be found in how to show milliseconds in days


Best iPhone/iOS framework for Presentation Apps

Which framework do you suggest for building an application to manage presentation, like an interactive and multimedia brochure?Do you think the iOS is enough?

Using Android Presentation class with a Bluetooth mouse

I am attempting to use the Presentation class for Android to display a secondary app on another display which can be navigated with the mouse; however, when I connect a Bluetooth mouse to the phone it only shows the cursor and allows for click inputs on the phone's primary display. Is there a way to

apache poi - What are these fonts in a powerpoint pptx file?

I want to collect font information of a pptx with the help of Apache POI. I basically search for string typeface= in the xmlObject of a powerpoint slide.In some of my files, I can see a bunch of lines that contains the search string: <a:latin typeface="+mn-lt"/> <a


user interface - Using HTML to present stuctured data

I have a question about how to present some structured data using HTML.I have some tree-like data, which you might normally present using sections and subsections (i.e. <h1>, <h2>, etc.) and/or using nested lists (i.e. lists whose items contain lists of sub-items).An example of this data

Print Powerpoint slide with python-pptx

I've been using python-pptx to access slides (I find it much smoother than using win32 as it doesn't need to open the Powerpoint window. However, I've checked the docs but can't find any method of printing a slide. Am I missing something?Here is what I have so far:from pptx import Presentationprs =

html - CSS - Background-size: Cover is too big

When i try to use the background-size:cover property with a fixed position my image becomes too big, and cropped. I'd like it to be the same size as the original image, but i can't figure this out. I'm trying to keep the affect of the image staying in position.#wrapper { width:100%; height:580px;

How can the CAPTCHA process be more user friendly or better implemented?

I have used CAPTCHA on my various web sites in the standard manner where I generated some obfuscated string of characters (odd pair of words, random number, etc.) in an image for the user to manually reproduce in a text box. I am also aware of recaptcha.net which extends the basic functionality of