JQuery: Fade out all other divs and move $(this) to top left

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开发者_如何学Python 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() {
      $("div#entry").click(function()
      {
        $(this)
            .siblings("div#entry")
                .fadeOut();
      });
  });

Thanks

---

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

Example:

$("div#entry") 

is slower to execute than

$("#entry")

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.

---

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
element.css({
    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:

element.animate({
    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.

---

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

---

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:

$("div.entry").each(function(){
        var h = $(this).position().top;
        $(this).css('top',h+'px');
    }); 

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.

---

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

$("div.entry").click(function()
{
   $(this).siblings.fadeOut(function()
   {
       $(this).animate({"left": "0","top":"0"});
   });
}

---

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