推下div並追加div

Question

我是jQuery的新手。 我想隱藏我點擊的div，然後用動畫下推4個div。在此之後，我想在點擊div之後的空間中追加另外4個div。

我已經試過這

這裏是我的代碼

(function() { 
    $('#ccc').on('click', '.box', function() { 
     var i = 0; 
     $(this).fadeOut().nextAll().slice(0, 4).animate({ 
      top: '100px' 
     }, function() { 
      i++; 
      if (i == 4) { 
       $(this).after('<div class="lt box"></div><div class="rt box"></div><div class="lt box"></div><div class="rt box"></div>'); 
      } 
     }); 

    }); 

})(); 

這裏是小提琴：提前

Answer 1

我找到了工作，你的作爲http://jsfiddle.net/ue7Gp/2/

謝謝就像我理解你的問題一樣。它應該足以讓你走上正軌！左右浮標不是理想的IMO。希望能幫助到你！

更新小提琴： http://jsfiddle.net/ue7Gp/3/

JS：

$('#ccc').on('click', '.box', function() { 
    $(this).fadeOut(function(){ 
     if ($(this).hasClass("lt")){ 
      var startwith = "lt"; 
      var endwith = "rt"; 
     } else { 
      var startwith = "rt"; 
      var endwith = "lt"; 
     } 
     for (x=0; x<2; x++){ 
      $(this).parent().prepend($('<div class="' + startwith + ' box"></div><div class="' + endwith + ' box">').hide().fadeIn("slow")); 
     } 
    }); 
}); 

Answer 2

花了一些時間，但嘗試這個FIDDLE。讓我知道這是不是所需的功能。希望能幫助到你。您發佈的原始文件的主要問題是頂端：100px樣式正在保留，這導致了這種差距。

更新：我調整了JavaScript，所以只調用動畫回調一次，這樣你就可以擺脫你的櫃檯。

編輯2：我更新了小提琴和下面的代碼，以反映您的請求，點擊的框沒有被刪除。我希望這有助於

(function() { 
    $('#ccc').on('click', '.box', function (e) { 
     var i = 0; 
     $(e.currentTarget).fadeOut(); 
     $(e.currentTarget).nextAll().stop().animate({ 
      "top": "220px" 
     }).promise().done(function() { 
       $(e.currentTarget).after('<div class="lt box"></div> 
       <div class="rt box"></div><div class="lt box"></div> 
       <div class="rt box"></div>').remove(); 
      $(".box").removeAttr("style"); 
     }); 

    }); 

})(); 



.box { 
    width:100px; 
    height:100px; 
    background-color:red; 
    position:relative; 
    margin-bottom: 10px; 
    float:left; 
    margin:5px; 
} 

#ccc { 
    width:220px; 
}