使div使用动画切换到另一个DOM位置-MakedivflywithanimationtoanotherDOMposition

2  

i made a responsive solution ( so i think ) using JQ . check it out below or in jsFiddle

我用JQ做了一个响应性的解决方案(所以我认为)。看看下面或者在jsFiddle。

first i cached all the necessary selectors for cleaner and concise code .

首先，我缓存了所有必需的选择器，使代码更简洁。

the -20 is because of the div { margin-top:20px}` there i calculated the TOP offset of both divs in relation to the document, then got the width and height of the small div

之所以是-20，是因为div {margin-top:20px} '我在那里计算了两个div相对于文档的顶部偏移量，然后得到了小div的宽度和高度

in the click function first i got the image's top offset so i could compare that with the #small's offset .

在click函数中，我首先得到图像的顶部偏移量，这样我就可以将其与#small的偏移量进行比较。

so if the image's distance to top is smaller than the #small's distance to top, it means that the img is in the #large div and so i move it using transform:translate giving it an Y-axis value equal to the TOP offset of the #small Div, so the img offset.top ( iOffset ) will become equal to the #small offset.top ( sOffset )

如果图像到顶部的距离小于到顶部的距离，这意味着img在#large div中，因此我使用transform:translate设置它的y轴值等于#small div的顶部偏移量，因此img偏移量。顶部(iOffset)将等于#small offset。顶部(sOffset)

also adding width and height of the #small div to the image

还可以将#small div的宽度和高度添加到图像中

else ( if iOffset is = or bigger than sOffset ) then it means that the image is not in the large div, so i need to translate it back to the offset of the #large div and add width:100% and height:100%

否则(如果iOffset是=或大于sOffset)则意味着图像不在大div中，因此我需要将它转换回#large div的偏移量，并添加width:100%和height:100%

hope i got it right and explained correctly. let me know if it helps

希望我没弄错，解释正确。如果有用就告诉我

var Large = $("#large"),
  Small = $("#small"),
  lOffset = $(Large).offset().top - 20 + 'px',
  sOffset = $(Small).offset().top - 20 + 'px',
  sWidth = $(Small).width(),
  sHeight = $(Small).height()

$(document).on("click", "img", function() {
  var iOffset = $(this).offset().top + 'px'
  if (iOffset 

div {
  margin: 20px;
  padding: 10px;
}

#large {
  width: 600px;
  height: 400px;
  background-color: gray;
}

#small {
  width: 120px;
  height: 90px;
  background-color: orange;
}

img {
  width: 100%;
  height: 100%;
  transition: 5s;
}