How to apply jQuery UI effect (slide+flip) at the same time?

Question

I've got a simple div box here:

<div id="tile">foo</div>

I want it to smoothly slide in from the (outside) left of the browser, right into the viewable area. While it slides in, I also want the div to flip once around its own axis.

To accomplish that, I did the following:

First, I set the div to be "outside" of the viewable area via css:

#tile{
 position: absolute;
 left: -500px;
 width: 162px;
 height: 162px;
}

Then, when the website loads, I apply the slide effect:

function slide(){
    $("#tile").animate({"left": "+=500px"}, 600);
}

Now, this works perfectly.

To apply the flip effect, I used this flip plugin for jquery: http://lab.smashup.it/flip

To flip, I do the following:

function flip(){
    var c = $("#tile").html();
    $("#tile").flip({
        direction:'lr',
        content:c
    });
}

This effect alone works great too.

BUT, if I COMBINE both, it won't work.

$(document).ready(function(){
    slide();
    flip();
});

The result is that the div element gets flipped first and then jumps (no slide effect) to its end position.

Any solution to this?

Did You Found Any Solution? I am having similar problem to work with the flip effect in Nivo Slider — Asif Atick, Oct 06 '12 at 07:28
See here? http://stackoverflow.com/questions/2344804/how-can-i-execute-multiple-simultaneous-jquery-effects — allanx2000, Jan 15 '13 at 20:20

score 0 · Accepted Answer · answered Feb 23 '21 at 22:04

As explained in this post dequeue() needs to be used like this:

$(document).ready(function(){
  var title = $("#tile");
  var content = title.html();
  var slideOps = {"left": "+=500px"};
  var flipOps = { direction: "lr", content: content };

  title.animate(slideOps, 600).dequeue().flip(flipOps);
});

Thanks to allanx2000 for pointing to the other post on Stackoverflow!

How to apply jQuery UI effect (slide+flip) at the same time?

1 Answers1