CODEWITHSUNDEEP
javascriptjquerytabsjquery-animate
Roland
Roland

Reputation: 9711

add animation to an tab navigation

I was wondering what could be the easiest way to add animation to some tab navigation. I'm developing a small documentation website, Documentation, and as you can see I have that small arrow that adds up to the tab when navigation.

Well, what I was thinking is what if I can do it like this : Sample ; I tried something, I added a span via JS and then on click event ( applied to the li elements ) trigger the arrow animation. The thing is that doing that I stopped the script which is responsible for making the tabs work as they do stop.

So is there another way to achieve something like that ? And what would be the logic ?

Upvotes: 0

Views: 376

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Simplest would be to add a narrow absolute position div inside st_slide_container and position to the right. Inside that new element add another element that is just large enough for your arrow icon and is position absolute.

Either use callback of tabs change( depends on what is available in plugin API) or add another click handler to a.st_tab. In this event handler you can get the index of current tab and apply animation of position top to the small arrow element

EDIT: Example of click handler to get index which would be multiplier for the top animation

$('a.st_tab').click(function(){
   alert($(this).parent().index())
})

Upvotes: 1

Related Questions