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

Keeping an image in its location when animation occurs

本文关键字：位置 图像 动画      更新时间：2023-09-26

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

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

Prototype有一个名为absolutizeLink的方法，它应该适用于您的场景。既然你在使用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();

我会尝试使用Jquery animate来简单地将它们的不透明度渐变为0。渐变实际上是将不透明度渐变为零，然后一旦它为零，它就会设置"display:none"，这样对象就会消失。你只想做前者！类似$（'myobjects'）.animate（｛opacity:0｝，慢速）；希望我的语法是正确的。干杯

相关文章：