Take the 2-minute tour ×

I have a grid of div's (we'll call "#entry"'s). I currently have them where once someone clicks any one div it will make all the others fade out. However rather abruptly the selected(clicked on) div will move to the top left of the part div. How can I get it to "smoothly" transition to that part of the screen after all the others have faded out? I'll provide below the code I'm currently using.

  $(document).ready(function() {


share|improve this question
Your code implies that you have more than one element with the ID entry. If so, this is invalid. You should use a class instead. –  user113716 Dec 21 '10 at 15:27
Thanks! I just recently asked what the difference between the two were and haven't broken the bad habit yet. :) –  moopasta Dec 21 '10 at 15:39

6 Answers 6

up vote 1 down vote accepted

First off it is incorrect to have multiple HTML Elements with the same ID

That being said the parent DIV must have a position:relative style set.

Using jQuery you can then do

       $(this).animate({"left": "0","top":"0"});
share|improve this answer
Tried this but the selected div still "snaps" to the left instead of getting to that position slowly. –  moopasta Dec 21 '10 at 16:04
Yeah, this doesn't work. Why was it selected as the answer? –  bozdoz Dec 22 '10 at 5:28

Also note that using an element name before a class or id is actually slower than just using the id or class name alone.



is slower to execute than


Which will both accomplish the same thing.

The reason for this is because when you provide jQuery with an element in front, it will subsequently search the entire DOM for that element, versus just searching for a specific ID/class.

share|improve this answer
hmmm... really? –  Derek Adair Dec 21 '10 at 15:57
Thanks didn't know this. –  moopasta Dec 21 '10 at 16:02
@Derek: Yes. The fastest selector in jQuery is the ID selector ($('#someid')). This is because it maps directly to a native JavaScript method, getElementById(). The second fastest selector in jQuery is the Tag selector ($('head')). Again, this is because it maps to a native JavaScript method, getElementsByTagName(). –  dmackerman Dec 21 '10 at 20:04
plus one, even though it doesn't really solve the question. :) –  bozdoz Dec 22 '10 at 5:29
I recommend searching Google for jQuery best practices and then Javascript best practices too. –  pilau Apr 17 '13 at 4:47

Position it absolutely at its current position before fading the siblings out:

var element = $(this);
var offset = element.offset(); // determine absolute position of the element
    position: 'absolute',
    top:      offset.top+'px',
    left:     offset.left+'px'

After that, fade your elements out. You can move this element to the top-left corner using the following code afterwards:

    top:  '0px',
    left: '0px'
}, 1000);

You will probably need to adjust the offset calculations based on your surrounding elements and CSS. I suggest that you follow patrick dw's hint: Use classes instead of ID's, since an ID is meant to be unique throughout the entire document.

share|improve this answer

look into the animate function ( http://api.jquery.com/animate/ )

share|improve this answer

You need to find their position on the page, set their CSS position value to absolute, and then set their CSS top, left, right, or bottom values to their respective values. You can do this like so:

        var h = $(this).position().top;

Then, you can set their position to absolute when (if) they are clicked. After that, fade out siblings and animate the clicked div to go to the position of the first value (which is where it will automatically go to).

The full code and example is on jsfiddle.

share|improve this answer

With check the positon before remove the others, and fix it there (jquery position) and then, animate it

share|improve this answer

Your Answer


