点击时匹配 div 位置

Question

所以我遇到了一个我觉得很简单的问题，只是不知道解决的确切方法。我附上了我创建的这个动画 gif，以准确说明我想要完成的工作。

我还创建了一个example here，说明我走了多远，也就是不远。我只是在点击时获得正确 div 元素的位置。我假设我需要获取 div 的左侧位置并从右侧位置减去该位置，然后添加 margin-top 或 position top 来调整左侧 div 元素的位置。

任何帮助将不胜感激，并提前感谢。如果您可以使用很棒的代码编辑和分叉新笔，或者您可以在此处发布代码。

http://cdpn.io/KtrdH

 $('.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 个像素以适应填充，但它不需要硬编码，通过一些数学和 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 来获得更快的效果。

下次添加更多代码，以便人们可以看到您已尝试过此操作。