Question

我有一个div的网格（我们称之为“#entry”）。我目前拥有它们，一旦有人点击任何一个div，它将使所有其他人淡出。然而，相当突然地，所选（单击）div将移动到部分div的左上角。在所有其他部分消失之后，我怎样才能“顺利”过渡到屏幕的那一部分？我将在下面提供我正在使用的代码。

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

由于

Answer 1

另请注意，在类或id之前使用元素名称实际上比仅使用id或类名称更慢。

示例：

$("div#entry")

执行速度比

慢

$("#entry")

哪一方都能完成同样的事情。

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

Answer 2

在将兄弟姐妹褪去之前，将其绝对置于当前位置：

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在整个文档中都是唯一的。

Answer 3

查看动画功能（http://api.jquery.com/animate/）

Answer 4

您需要在页面上找到它们的位置，将其CSS位置值设置为绝对值，然后将CSS的top，left，right或bottom值设置为各自的值。你可以这样做：

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

然后，您可以在单击它们（如果）时将其位置设置为绝对值。在此之后，淡出兄弟姐妹并为点击的div设置动画以转到第一个值的位置（这将是它将自动转到的位置）。

完整的代码和示例位于jsfiddle。

Answer 5

在删除其他人之前检查位置，然后将其修复（jquery position），然后animate

Answer 6

首先，多个具有相同ID的HTML元素

是不正确的

据说父DIV必须设置position:relative样式。

然后使用jQuery，您可以

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

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

6 个答案: