Search code examples
jqueryanimationsliding-doors

need help in improving Horizontal sliding div

I have this script:

http://jsfiddle.net/NV2uV/

It works, but I do not like it.

Cons:

  1. Wrench (edge blocks).
  2. In the transition from one unit to another, the animation is performed in two steps (I want a continuous animation).
  3. The script code is not beautiful -- very much repetition.

In short - it does not look nice.

How can I improve the script to look at the animation and it was good for eyes (if you have ready-made solutions - please tell me).

Update:

If you set the animation smaller - that animation looks quite nice.

Update 2:

I found solution: in animate function must add setting "queue:false", then animation will not be implemented not consistently but simultaneously.

http://jsfiddle.net/TtHBy/

But still I do not like a lot of repetitions in my script, how can it be cut and make it beautiful?

Solution

  • Do you want a horizontal Accordion menu? You could look at this jQuery example: http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/

    And here is another example: http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

    And one more: http://tympanus.net/Tutorials/ElegantAccordion/