Question

所以我遇到了一个容易出问题的问题，只是不知道确切的解决方法。我正在附加我创建的这个动画gif，以说明我正在努力实现的目标。

animation of matching div position on click

我还创建了example here我已经走了多远，这已经不远了。我只是点击右侧div元素的位置。我假设我需要得到div的左侧位置并从右侧位置减去该位置，并添加margin-top或position top来调整left div元素的位置。

任何帮助都会得到很大的帮助，并提前感谢。如果您可以使用非常棒的代码编辑和分叉新笔，或者您可以将代码发回此处。

 $('.static-container').each(function() {
 $(this).click(function (e) {
   var posX = $(this).offset ().left,
       posY = $(this).offset ().top;
   alert((posX) + ' , ' + (posY));
   });
 });

解决方案

 $(function(){
    $(".static-container").click(animateDescription);
 });

 function animateDescription(){
    var topCss = $(this).offset().top;
    var relativeTop = topCss - 68;
    $(".dynamic-container").animate({
        top: relativeTop}, 500);
 }

也有效

 $('.static-container').each(function() {
   $(this).click(function (e) {
       posY = $(this).offset ().top;
       $('.dynamic-container').animate({top: posY -68});
   });
 });

Answer 1

如果使用jQuery，实际上很容易实现。我根据您提供的示例提出了JS Fiddler Demo。基本上我所做的改变是

1-将动态容器div相对于其父级定位，以便它可以“浮动”...

.wrapper .column-a .dynamic-container {
  height: 100px;
  background-color: #efefef;
  padding: 20px;
    position:relative; 
}

2-添加此javascript以处理点击事件并相应地滑动动态div

$(function(){
    $("div.static-container").click(animateDescription);
});

function animateDescription(){
    var topCss = $(this).offset().top;
    var relativeTop = topCss - 20;
    $("div.dynamic-container").animate({
        top: relativeTop}, 500);
}

请注意，我正在减去20个像素以容纳填充，但是DOESNT需要进行硬编码，通过一些数学和jquery，您可以通过从外部高度减去高度来计算实际填充（或者某些东西）在这些线之间）

JS Fiddler Demo

Answer 2

如果要移动的div在x轴上是静态的：

$('.static-container').each(function() {
 $(this).click(function (e) {
       posY = $(this).offset ().top;
   $('.animation-div').offset({top: posY});
   });
 });

Answer 3

我曾经做过一些事情，我必须用它来表示鼠标的x和y位置并使用这段代码。

$("#wrapper").mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;

    $('body').click(function() {

        $(".animating_div").css({
            'top' : window.y + 'px',
        });
    });
});

因此，您希望使用y位置为div设置动画。您必须在想要操作的div上使用绝对定位。

使用animate代替css。或者甚至更好，您可以添加一个具有动态定位的课程，并使用addClass，removeClass来获得更快的效果。

下次再添加一些代码，以便人们可以看到您尝试过此操作。

点击时匹配Div位置

3 个答案: