ansaurus

Question

Answer 1

A:

Since the tabs are just li elements, can you set all of them to display:none when you first load the page, and then use JQuery's Fade (http://jqueryui.com/demos/effect/) effect to individually fade each li element in?

a.feng 2010-07-07 22:15:57

Simply listing calls to fadeIn("slow") on each element results in all fading in at the same time. I don't know how to control the timing in order to delay an element's fade until the previous one is complete.

Ken 2010-07-07 22:41:56

A possibly messy way to do it might be to use fadeIn's callback function and use nested fadeIn's. The callback isn't called until the animation is complete, so the each successive fadeIn wouldn't be called until the previous one is complete.Another (possibly messy) option is to use some kind of Javascript sleep() timer.

a.feng 2010-07-07 22:49:33

The callback idea sounds good. Messy in an elegant sort of way. Will try tomorrow - it's 1am here. Thanks!

Ken 2010-07-07 23:05:25

No problem. Good night! (:

a.feng 2010-07-07 23:15:10

we say "la nuit porte conseils" and upon waking I thought maybe "sleep" was the answer after all. I credit you for suggesting it!

Ken 2010-07-08 20:01:59

Answer 2

A:

I found a discussion of my problem here: http://p.karageorgakis.com/blog/jquery_simulating_a_delay_function_between_fade_in_out_effects/

Among the solutions proposed, the javascript setTimeout() trumped the other solutions, at least for my purpose.

Here is the code I went with:

$(function() {
    $("#tabs").tabs();
    $("#tabs").fadeIn(500);
    $("#li1").fadeIn(500);
    setTimeout('$("#li2").fadeIn(500)', 300);
    setTimeout('$("#li3").fadeIn(500)', 600);
    setTimeout('$("#li4").fadeIn(500)', 900);
});

The tabs widget itself as well as the list items are all set to display:none at the outset.

There was another issue that I will share, because it led me to the nice fade solution.

This widget needed to float to the left of some other content, but also needed to be hidden until fully instantiated by JQuery. fadeIn() wasn't working with an element set to visibility:hidden; it had to be display:none, but this caused the widget to displace the surrounding content and appear abruptly, which looked really awful. Fading in was a way to mitigate that.

In retrospect, maybe I could block off the (known) dimensions of the tabs widget, anyway I like the result I got!

Ken 2010-07-08 19:59:51

ansaurus

tags:

views:

answers:

jquery-ui tabs with fadeIn?

related questions