jQuery Tools: wait for animation to finish, then do something

JavaScript
1

I’m using jQuery Tool’s tabs an accordion as per here: http://www.jquerytools.org/demos/tabs/accordion.htm

The whole thing is activated with

  $("#accordion").tabs(
    "#accordion div.pane",
    {tabs: 'h2', effect: 'slide', initialIndex: null}
  );

While the content of the panes is revealed with a slide function, in my setup, I would like the images within the pane to be shown only once the slide animation has finished. I’ve fiddles around but couldn’t get it to work.

I thought of setting the images to display:none; and then change them to display once the rest of the content is revealed?

Can I do this by adding something to the above code? Many thanks

2

Actually, I’ve just realised that I’d also like to hide the image of the current panel as soon as an accordion header is clicked.

3

Hi,

Did you read the documentation?
http://www.jquerytools.org/documentation/tabs/index.html

I’m not familiar them personally but the documentation says


var accordian = $("#accordion").tabs("#accordion div.pane", {
  tabs: 'h2',
  effect: 'slide',
  initialIndex: null
});
accordian.onClick(function(index) {
 alert('click click click')
});

You could do something there and put it in a setTimeout if you want to wait til the elements are open.
Or, you could try making a custom effect to show , hide, fade elements as you want.


$.tools.tabs.addEffect("myEffect", function(tabIndex, done) {
  /* here you'll write your effect. the 'this' variable points to the API */
});