插入内联元素并将动画移动到左侧

我一直试图解决这个问题一个星期了，它看起来很基本，所以也许我错过了一些东西。插入内联元素并将动画移动到左侧

我想要在屏幕（或其容器）上居中放置一个div，然后在其右侧插入第二个div，以便之后两个居中（每边空间相等）。

插入第二个div不是问题，但我需要第一个块滑动到新块插入后的位置。
http://jsfiddle.net/rdbLbnw1/

.container { 
    width:100%; 
    text-align:center; 
} 

.inside { 
    border:solid 1px black; 
    width:100px; 
    height:100px; 
    display:inline-block; 
} 

$(document).ready(function() { 
    $("#add").click(function() { 
     $(".container").append("<div class='inside'></div>"); 
    }); 
}); 

<div class="container"> 
    <div class="inside"></div> 
</div> 
<input id="add" type="button" value="add"/>

我需要明确地计算在原来的盒子要结束了，然后动画效果，或是否有更好的办法做到这一点？

来源

2014-09-01 Jeremy Miller

我会推荐使用[Masonry]（http://masonry.desandro.com/）。我已经多次使用它，它的漂亮水坝很好，这可以创造你想要的效果。（你将不得不混淆它，但它的可行性） – Ruddy 2014-09-01 07:33:16

我喜欢你的问题，以便决定写这篇文章：

$(document).ready(function() { 
    var isInAction = false; 
    var intNumOfBoxes = 1; 
    var intMargin = 10; 
    $containerWidth = $(".container").width(); 
    $insideWidth = $(".inside").width(); 
    $(".inside").css('margin-left',($containerWidth - $insideWidth - intMargin)/2 + 'px'); 
    $("#add").click(function() { 
     if (!isInAction){ 
      isInAction = true; 
      intNumOfBoxes +=1; 
      $(".current").removeClass("current"); 
      $(".container").append("<div class='inside current'></div>"); 
      $('.inside').animate({ 
       'margin-left': '-=' + ($insideWidth + intMargin)/2 + 'px' 
      }, 300, function() { 
       $(".current").css('margin-left',($containerWidth + ((intNumOfBoxes - 2) * ($insideWidth + intMargin)))/2 + 'px'); 
       $(".current").fadeIn(500,function(){ 
        isInAction = false; 
       }); 
      }); 
     } 
    }); 
});

而且在CSS中添加此类：

.current { 
    display:none; 
}

你并不需要更改JS代码变量除了intMargin。您可以更改此var以在框之间设置边距。

注意：此代码也适用于旧版浏览器，无需支持像transition这样的CSS3功能。

更新：一些错误，如重复点击修复。

Check JSFiddle Demo

来源

2014-09-01 07:57:40 Moshtaf

我怀疑我需要明确计算边距。这正是我所期待的，完美！ – 2014-09-01 20:35:40

首先，我们可以仅动画有明确的数值，如宽度，左或保证金的事情。我们不能动画像对齐（实际上使用相同的边距属性，但隐含，没关系）的东西。所以如果我们知道插入的div的宽度，我们只需将它添加到我们的容器。

1）我们中心容器本身，并添加过渡到它

.container { 
    width: 102px; /* set explicit width; 102 - because of borders */ 
    margin: auto; /* set margin to 'auto' - that will centre the div */ 
    transition: width 0.5s; 
}

2）然后增加宽度时添加的div

3）别急！如果我们将div添加到太窄的容器中，它将被添加到底部而不是正确的。所以我们需要在之前将另一个容器设置为合适的宽度。

查看最终示例on JSFiddle。

顺便说一句，在使用内联块时，从代码中删除所有换行符和制表符，因为它会在块之间产生空格。

来源

2014-09-01 08:08:45

+ +1因为简单，但我没有寻找过渡般的效果......更像是一种幻灯片式的表演。 – 2014-09-01 20:37:21

插入内联元素并将动画移动到左侧

回答

相关问题