CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-animate
Jeremy Blanchard
Jeremy Blanchard

Reputation: 167

jQuery: How to animate two elements without them bumping each other

I'm trying to get a 100% width table to "slide over" to reveal a "panel" behind it.

Here is a jsFiddle with an example of where I'm at and the "bumping" that happens: http://jsfiddle.net/z93se/2/ (using jQuery UI)

Click on a table row to see the transition happen. During the animation, the table "pops under" the new expanded panel. Then after the animate it goes back to the left where it belongs.

How do I get them to both slide at the same time and keep their positions?

PS - I'm okay with the moving which elements have the padding and floating as long as the end result works.

Update:

Two other requirements that I have: 1) The table needs to be 100% width before the animation. 2) The panel on the side that is "sliding out" needs to be fixed width.

Update 2:

New jsFiddle that shows the width of the table using a border (so it's easier to play with). http://jsfiddle.net/z93se/14/

Which brings up a second problem. You have to click the row twice for it to begin acting like I expect it to. It's default state is with the table expanded and the panel hidden. After clicking a row twice, it starts working closer to how I expect (except it still has the problems in the original question). Help on this would also be appreciated.

Upvotes: 1

Views: 491

Answers (2)

Jeremy Blanchard
Jeremy Blanchard

Reputation: 167

Finally got it working. Had to use the animate() function and pass in a callback to hide the div when it is done.

See this jsFiddle: http://jsfiddle.net/744BL/

Notes: Using IDs as selectors caused some problems that switching over to classes didn't.

Upvotes: 2

Sudesh
Sudesh

Reputation: 1169

This css would do

html, add container with id task-details-container to task-details

CSS 

#task-list table {
    width: 75%;
}
.details-active {
    padding-right: 0px;
}
#task-details-container {
    width: 25%;
    float: right;
}
#task-details {
    width: 100%;
    padding: 0;
    display:none;
}

I hope this is what you wanted, please see the css i have changed

**Updated

Upvotes: 1

Related Questions