2

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

4

3 回答 3

3

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

小提琴

于 2013-07-23T22:44:59.277 回答
1

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();
于 2013-07-23T22:33:43.383 回答
1

我会尝试使用 Jquery animate 简单地将它们的不透明度淡化为 0。淡出实际上所做的是将不透明度淡化为零，然后一旦它为零，它就会设置“显示：无”，以便对象消失。你只想做前者！类似 $('myobjects').animate({opacity: 0}, slow); 希望我的语法在那里是正确的。干杯!

于 2013-07-23T22:39:43.007 回答