Strips Menu With JQuery

Question

Hello,

First of all, I am not an advanced JQuery developer, however, I have been creating what I call Strips Menu with JQuery, you can see it here by clicking the Preview link on top:

http://jsbin.com/uwopu3/edit

When I click on a strip, it promptly shows the contents relevant to hovered strip but I need sliding effect something that has been done on this site:

http://jeemsolutions.com/

I tried giving the animate function a time of 1500, but still no sliding effect.

How do I give it sliding effect like that of jeemsolutions for which the link is provided above.

Thank You

Answer 1

You are using the animate function wrong. It takes the CSS properties you want to animate to as arguments, so try something like:

var w = $('#slide').width() - $('.bar').size() * $('.bar').width() + 10;
$(this).css('text-indent', '0px');
$(this).animate( {width:  w}, 500);

Answer 2

I know this might sound wrong, but why don't you simply use jQuery Accordions? It does what you need, and is supported against different browsers and all that.

Cheers