SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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

    Code:
      $("#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. #2
    SitePoint Addict
    Join Date
    Mar 2004
    Posts
    260
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi,

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

    I'm not familiar them personally but the documentation says
    Code javascript:
    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.
    Code javascript:
    $.tools.tabs.addEffect("myEffect", function(tabIndex, done) {
      /* here you'll write your effect. the 'this' variable points to the API */
    });


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •