CODEWITHSUNDEEP
jqueryjquery-uianimationjquery-animate
netbrain
netbrain

Reputation: 9304

how can I animate this a bit better using jquery-ui's toggleClass?

I have the following code:

http://jsfiddle.net/zmhRK/

The problem is very graphical, so i don't think i can explain it any better than actually showing it in action on jsfiddle. The problem is that when you press [toggle] then you can see that the list item is expanding and in this transition effect all you see is the parents background color, this is rather ugly. SO, what i want is for the contents of the list item to be visible during the animation instead of visible only after the animation.

I know this is possible if i for example manage to set the style attribute to display:block on the element in transition, but then i would need some kind of a callback function to remove the display:block once the transition is complete. Afaik, this callback function doesn't exist.

Any idea's on how i can solve this?

Upvotes: 2

Views: 331

Answers (1)

Jasper
Jasper

Reputation: 76003

You can use .slideToggle() to create your animation:

$(document).ready(function(){
    $('.sidebar-menu-item-controls').append('[toggle]').click(function(){

        //select the parent of this element, then select the next sibling,
        //which is the UL associated with this click event
        $(this).parent().next().slideToggle(300);
    });
});​

Here is a demo: http://jsfiddle.net/jasper/zmhRK/8/

Note that this also works for your nested ULs.

Upvotes: 3

Related Questions