Search jQuery

jQuery Forum

div Animation: on mouse over, the other divs change their position

in Getting Started • 9 years ago

I'm working on a jQuery animation that expands the height of a 'div.panel' on mouse over and comes back to normal when the mouse is out.

The animation works for the selected 'div.panel', specially if is a '.panel.panel-small', but the problem is relative at the nearby elements that moves down from their initial location when the mouse is over the 'div.panel.panel-big'!

Here's a fiddle of my problem. Thanks in advance!

Replies(4)

kbwood.au

Re: div Animation: on mouse over, the other divs change their position

9 years ago

The small panel is aligned in the centre vertically, so when the height of the big panel changes so does the former's position. Try setting:

.panel {
vertical-align: top;
}

RinoDrumm..

Re: Re: div Animation: on mouse over, the other divs change their position

9 years ago

It doesn't work as I need

kbwood.au

Re: div Animation: on mouse over, the other divs change their position

9 years ago

Can you explain exactly what you want your demo to do?

watusiware

Re: div Animation: on mouse over, the other divs change their position

9 years ago

Well, of course, if you change the height of some inline element, it will affect the placement of other elements, since it changes the layout.

What are you trying to accomplish?

If you want some element to change size without affecting the layout, you have to use position:absolute to remove it from the layout.

Top Reply

Response title

Attachments

jQuery Forum

div Animation: on mouse over, the other divs change their position

Replies(4)

Re: div Animation: on mouse over, the other divs change their position

Re: Re: div Animation: on mouse over, the other divs change their position

Re: div Animation: on mouse over, the other divs change their position

Re: div Animation: on mouse over, the other divs change their position

Statistics

Tags

Actions