Question

I am trying to build a Windows 8 Metro style page which has a bunch of unordered lists which hide and show list items every few seconds, each with different animation effects. So I am trying to build a few different types of transition effects that I can use.

If you have a look at my jsfiddle (or see below for code) you can see that I have a few effects working (fade and slide up/down) but my explode and fold effects don’t work.

Why is explode and fold not working?

Update: explode and fold are now working, thanks to dsundy for pointing out my stupidity, but still hoping for some help with…

Also, although slide left/right is working, is it possible to make the new item slide in at the same time so there is not a long gap between one LI sliding left and the other sliding in from the right?

With explode and fold is it possible to make the new LI appear underneath the outgoing LI?

Any suggestions for any more interesting transistions?

$(el).hide("explode", { pieces: 4 }, 1000, function () {
  $(n).show("explode", { pieces: 4 }, 1000);
});

$(el).hide("fold", {  }, 1000, function () {
    $(n).show("fold", {  }, 1000);
});

Answer 1

Explode and fold aren’t working because you don’t have click functions for those buttons.