Question

我有一个图像网格，当你点击图像时，所有图像都被点击了一个向下移动。我的问题是，当我这样做时，剩余的图像被拉到左上角。我认为这是因为我正在移除图像，因此剩下的图像不被认为是唯一的图像，因此它被放置在网格的位置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

<div class="portfolio">
  <ul id="grid">   
     <li><a href="#"><img src="1.jpg"><span>some text></a></li>
     <li><a href="#"><img src="2.jpg"><span>some text></a></li>
     <li><a href="#"><img src="3.jpg"><span>some text></a></li>
     <li><a href="#"><img src="4.jpg"><span>some text></a></li>
     <li><a href="#"><img src="5.jpg"><span>some text></a></li>
     <li><a href="#"><img src="6.jpg"><span>some text></a></li>
     <li><a href="#"><img src="7.jpg"><span>some text></a></li>
     <li><a href="#"><img src="8.jpg"><span>some text></a></li>
     <li><a href="#"><img src="9.jpg"><span>some text></a></li>
      </ul></div>
 <div id="hidden">

CSS

 ul#grid {
  list-style: none;
  top: 0;
  margin: 60px auto 0;
  width: 1200px; 
   }

 #grid li span {
  color: white;
  display:block;
  bottom:250px;
  position:relative;
  width:180px;
  }

 #grid li {
  float: left;
  margin: 0 40px 75px 0px;
  display:inline;
  position:relative;
 }

JSFIDDLE

Answer 1

最简单的方法是不使用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'});
  });
 });

FIDDLE

Answer 2

Prototype有一个名为absolutize Link 的方法，它适用于您的场景。由于您使用的是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;
  });
}

来源： Link

在dom发生变化之前，使用此方法冻结目标元素的大小/位置：

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

Answer 3

我会尝试使用Jquery动画来简单地将它们的不透明度淡化为0. fadeout实际上做的是将不透明度淡化为零，然后一旦它为零，它设置“display：none”以使对象消失。你只想做前者！像$（'myobjects'）。animate（{opacity：0}，slow）;希望我的语法在那里是正确的。干杯！

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

3 个答案: