CODEWITHSUNDEEP
javascriptjquery
ONYX
ONYX

Reputation: 5859

animating div elements left to right and back

I have a menu system made up of divs and i want to animate the left property to slide each time the user mouses over a menu item but i need the outer div(which is black) element to expand as the menu items move left to right also I want the div element(.container) to slide back and contract the outer div element(this black div which is 0 width) I have a basic example done in jsFiddle it olny moves the elements to the left

Upvotes: 0

Views: 700

Answers (3)

Paul Sham
Paul Sham

Reputation: 3205

If I could rewrite your html a bit, I would put make each .menu-item into an unordered list.

When you mouseenter the unordered list, you expand the second container. Inside that mouseenter function, I would have a second event when you mouseenter a list item, you populate the second container and stopPropogation.

You could probably still do it with a mouseenter on the first container, and another mouseenter on the div.menu-item, but your first container has extra height and width.

Upvotes: 1

James Montagne
James Montagne

Reputation: 78630

You should be able to fix the left is null issue by having the code not execute on the last .content, like this:

$('.container').not(':last').find('.menu-item').mouseenter(function () {

This will not apply to the menu-items within the green box.

For the re-show issue, I would change the way you are showing. Instead of sliding the box out from behind the other, you can position it where you want it to end up and hide it, then you can use:

.animate({width: 'show'})

Which will give a similar sliding effect.

That, or do it similar to my response to your other question, only without the collapsing I had previously:

http://jsfiddle.net/V3RHr/3/

Upvotes: 0

James Montagne
James Montagne

Reputation: 78630

Having a little trouble fully understanding, but is this sort of what you mean?

http://jsfiddle.net/V3RHr/2/

Upvotes: 2

Related Questions