插入內聯元素並將動畫移動到左側

我一直試圖解決這個問題一個星期了，它看起來很基本，所以也許我錯過了一些東西。插入內聯元素並將動畫移動到左側

我想要在屏幕（或其容器）上居中放置一個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

插入內聯元素並將動畫移動到左側

回答

相關問題