Javascript 动画发生时将图像保持在其位置

我有一个图像网格，当你点击一个图像时，除了点击的图像外，所有的图像都会向下移动。我的问题是，当我这样做时，剩下的图像会被拉到左上角。我想这是因为我正在移除图像，所以剩余的一个不是唯一的一个，所以它被放置在网格的位置1

$(document).ready(function() {

  $('#grid li').click(function() {
  $(this).siblings().animate({opacity: 0, top:'15px'},1000);
  $(this).siblings().fadeOut(function() {
     });
  });   

$('#hidden').click(function() {
  $('#grid li img').animate({width:'339px',height:'211px'});
  $('#grid li').siblings().fadeIn();
  $('#grid li').siblings().animate({opacity: 1, top:'0px'},1000);
       });
   });

HTML

---

Prototype有一个名为

绝对化的方法，它应该适合您的场景。由于您使用的是jQuery，您可能想看看这个插件：

jQuery.fn.absolutize = function()
{
  return this.each(function(){
    var element = jQuery(this);
    if (element.css('position') == 'absolute'){
        return element;
    }

    var offsets = element.offset();
    var top = offsets.top;
    var left = offsets.left;
    var width = element[0].clientWidth;
    var height = element[0].clientHeight;

    element._originalLeft = left - parseFloat(element.css("left") || 0);
    element._originalTop = top - parseFloat(element.css("top") || 0);
    element._originalWidth = element.css("width");
    element._originalHeight = element.css("height");

    element.css("position", "absolute");
    element.css("top", top + 'px');
    element.css("left", left + 'px');
    element.css("width", width + 'px');
    element.css("height", height + 'px');
    return element;
  });
}

资料来源：

在dom更改发生之前，使用此选项冻结目标元素的大小/位置：

$('#grid li').absolutize();

我会尝试使用jqueryanimate将它们的不透明度淡入0。“淡出”实际上是将不透明度淡出为零，然后一旦它为零，它将设置“显示：无”，以便对象消失。你只想做前者！类似于$（'myobjects'）.animate（{opacity:0}，slow）；希望我的语法是正确的。干杯
 最简单的方法是不要使用fadeOut（），因为它将display设置为：none，这就是图像移动的原因

$('#grid li').click(function() {
  // $(this).siblings().css("position","relative");
  $(this).siblings().animate({opacity: 0, top:'15px'},1000, function() {
    // Animation complete.
      $('#grid li img').animate({width:'339px',height:'211px'});
  });
 });  

您对问题的想法是正确的，但是您希望实现什么呢？我希望将图像保留在原始位置。我尝试了一些jquery来获取当前图像的位置，并使用它来保持它在那里，但事情变得疯狂；图像到处飞舞。Matty-d感谢这一点，但您仍然可以单击已变为不透明度0的图像，我无法单击背景将所有内容恢复回来啊，是的，然后在动画发生后，为对象提供可见性：隐藏。它仍然会占用空间，但不会让用户点击！我试过了，但似乎不起作用，我确信这是我的代码$（this.sibbins（）.css（“可见性”、“隐藏”）}；嗯，这似乎是对的，也许这不是在你的动画或其他什么之后发生的？对不起，我不知道！问题您仍然可以单击未显示的图像。例如，使用类将其设置为可单击或不可单击。
$('#grid li').absolutize();

$('#grid li').click(function() {
  // $(this).siblings().css("position","relative");
  $(this).siblings().animate({opacity: 0, top:'15px'},1000, function() {
    // Animation complete.
      $('#grid li img').animate({width:'339px',height:'211px'});
  });
 });