Home/ Questions/Q 9134369
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T08:38:51+00:00

I’m looking to improve a script I’ve written in jQuery to do some animation

  • 0

I’m looking to improve a script I’ve written in jQuery to do some animation that chains multiple animations together (in somewhat of a timeline sequence). Instead of manually chaining each individual animation, I’d like to write a function to replace a few elements that are standard in each animation.

Admittedly, I don’t have the JavaScript knowledge to know the best practices to accomplish this; that being said, some pointers/examples would be fantastic.

Here’s what I’ve got:

function itemsFirstAnim() {

    // Define each target div
    var one = $(".one");
    var two = $(".two");
    var three = $(".three");
    var four = $(".four");
    var five = $(".five");
    var six = $(".six");
    var seven = $(".seven");
    var eight = $(".eight");
    var nine = $(".nine");
    var ten = $(".ten");
    var eleven = $(".eleven");
    var twelve = $(".twelve");

    // Show a block (opacity 1), give the overlay a position, show and animate it
    twelve.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
        // cover the block with the overlay when the animation is done
        twelve.children('.overlay').css({ right: 0 });

        eleven.css("opacity", 1).children(".overlay").show().animate({ bottom: "100%" }, 750, function() {      
            eleven.children('.overlay').css({ bottom: 0 });

            seven.css("opacity", 1).children(".overlay").show().animate({ right: "100%" }, 750, function() {
                seven.children(".overlay").css({ right: 0 });

                and so on....
        });         
        });

    });
}

Ideally, I’d like to have arguments of target and direction to replace the initial selector (i.e. twelve) and it’s animation direction (i.e. right: "100%"). Since each target and direction is different, I can’t just write a function and call it inside of itself, unless I nested it 12 times, which also seems rudimentary at best.

Finally, I’d like this function (or maybe a plugin?) to stop executing when all 12 of these have been applied.

Unfortunately, the order of the animation is not sequential (as show in the example. I do know the order of the numbers to animate, however).

Here’s an example of what I’ve got: http://codepen.io/anon/full/Dxzpj

If anyone has any insight, it would be much appreciated. Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not particularly beautiful, but you can customize the order of animations however you want by using custom queues; see the queue and dequeue functions.

    A simple example might look like:

    $(function () {
  // Use the body to track the animation queue; you can use whatever
  // element you want, though, since we're using a custom queue name
  var $body = $(document.body);

  // Helper functions to cut down on the noise
  var continue_queue = function () {
    $body.dequeue("my-fx");
  };
  var add_to_queue = function (cb) {
    $body.queue("my-fx", cb);
  };

  // Define your queue.  Be sure to use continue_queue as the callback
  add_to_queue(function () {
    $('#one').animate({ height: '8em' }, 750, continue_queue);
  });
  add_to_queue(function () {
    $('#two').animate({ width: '8em' }, 750, continue_queue);
  });

  // Need to call this once to start the sequence
  continue_queue();
});

    This will track the progress of your overall animation using a separate queue attached to the <body> element. When each part of the animation finishes, it calls continue_queue() to indicate that the next part should run.

    You can use this approach to build your animation piecemeal—in separate functions, a loop, etc. And it won’t actually start running until you fire it off.

    You can see this live and mess with it on jsfiddle.

    • 0