JQuery：淡出所有其他div并将$（this）移到左上角

我有一个div的网格（我们称之为“#entry”）。我现在有他们，一旦有人点击任何一个div它将使所有其他淡出。但是，所选（单击）div会突然移动到part div的左上角。在所有其他部分都消失后，如何使其“平滑”过渡到屏幕的该部分？我将在下面提供我当前使用的代码

  $(document).ready(function() {
      $("div#entry").click(function()
      {
        $(this)
            .siblings("div#entry")
                .fadeOut();
      });
  });

---

谢谢

在淡出兄弟姐妹之前，将其绝对定位在当前位置：

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'
});

之后，淡出你的元素。之后可以使用以下代码将此元素移动到左上角：

element.animate({
    top:  '0px',
    left: '0px'
}, 1000);

---

您可能需要根据周围的元素和CSS调整偏移计算。我建议您遵循patrick dw的提示：使用类而不是ID，因为ID在整个文档中都是唯一的。

查看动画函数（）

在删除其他函数之前检查位置，并在那里修复它（），然后，首先，使用相同ID的多个HTML元素是不正确的

也就是说，父DIV必须有一个

位置：relative

样式集

然后可以使用jQuery执行以下操作

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

---

还要注意，在类或id之前使用元素名实际上比仅使用id或类名要慢

例如：

$("div#entry") 

执行速度比

$("#entry")

这两者将完成相同的事情

---

这样做的原因是，当您在jQuery前面提供一个元素时，它随后会在整个DOM中搜索该元素，而不是只搜索特定的ID/类。

您需要找到它们在页面上的位置，将它们的CSS位置值设置为绝对值，然后将它们的CSS顶部、左侧、右侧、，或将底部值设置为其各自的值。您可以这样做：

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

然后，您可以在单击它们时将其位置设置为绝对位置。之后，淡出并设置单击的div的动画，以转到第一个值的位置（它将自动转到该位置）

---

完整代码和示例已打开。

您的代码意味着您有多个ID为

条目的元素。如果是，这是无效的。你应该改用课堂，谢谢！我最近刚问过这两者有什么区别，还没有改掉这个坏习惯尝试了这个方法，但所选的div仍然“捕捉”到左侧，而不是缓慢地到达该位置。@Derek:是的。jQuery中最快的选择器是ID选择器（$（“#someid”）。这是因为它直接映射到本机JavaScript方法getElementById（）。jQuery中第二快的选择器是标记选择器（$（'head'））。同样，这是因为它映射到一个本机JavaScript方法getElementsByTagName（）。加上一个，即使它不能真正解决问题。：）我建议在谷歌搜索jQuery最佳实践，然后再搜索Javascript最佳实践。