JQuery高度不適用於浮動元素

我試圖在我正在處理的基於ajax的應用程序中從窗口頂部的一段內容（項目列表）中設置動畫。我這樣做的方式是通過調用ajax並將生成的HTML前置到主體頂部。元素的CSS具有100％的負頂邊距。然後，我使用element.animate通過給它一個頂部邊距爲0來動畫內容。JQuery高度不適用於浮動元素

問題是內容是高度動態的，需要滑動備份並在用戶單擊按鈕時隱藏。我嘗試使用marginTop：'-100％'，但我得到了一些非常奇怪的行爲，其中整個身體的內容向上滑動並消失，然後立即重新出現（沒有頂部內容中的ajax'd）。我也嘗試過使用element.outerHeight（）來獲取容器的高度，然後將其作爲負頂端magin應用，但outerHeight函數僅返回填充（40px）的高度並忽略其中的內容。但是，如果列表項不在無序列表中浮動，它將返回適當的高度。

有關如何使這項工作的任何想法？

謝謝！

這裏是在和JavaScript ajax'd元素我用動畫一切的CSS：

CSS（我使用LESS）：

#lists-container{ 
width: 960px; 
padding: 20px; 
margin: -100% auto 10px auto; 

#lists-list{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 980px; 

    li{ 
     float: left; 
     background: #FFF; 
     border: 1px solid #CCC; 
     padding: 2px 5px; 
     width: 310px; 
     .border-radius(); 
     margin: 0 10px 10px 0; 
     position: relative; 

     p{ 
      margin: 0; 
      padding: 0; 
     } 
     .list-name{ 
      text-decoration: none; 
      font-size: 18px; 
      color: #333; 

      &:hover{ 
       color: rgba(230,39,39,1); 
      } 
     } 
     span{ 
      position: relative; 
      top: -2px; 
      padding: 0 0 0 10px; 
     } 
     a.delete-list{ 
      color: #ccc; 
      font-weight: bold; 
      font-size: 18px; 
      text-decoration: none; 
      position: absolute; 
      right: -20px; 
      top: 3px; 

      &:hover{ 
       color: #333; 
      } 
     } 
    } 
}

}

的Javascript：

$('#lists-toggle').live('click', function(){ 

    showLoader(); 

    if($('#lists-toggle').hasClass('open')){ 
     $('#lists-container').animate({ 
      marginTop: '-100%' 
     }, 500, function(){ 
      $('#lists-container').remove(); 
      hideLoader(); 
     }); 
     $('#lists-toggle').removeClass('open'); 
    } else { 
     $.ajax({ 
      url: $(this).attr('href'), 
      async:true, 
      type:'GET', 
      dataType:'json', 
      success:function (data, textStatus) { 
       hideLoader(); 
       console.log(data); 

       var template = Handlebars.compile($("#listsTemplate").html()); 
       var context = {lists: data['result']['lists']}; 
       Handlebars.registerPartial('singleList', $("#singleListTemplate").html()); 
       var result = template(context); 

       $('.page').prepend(result); 
       $('#lists-container').animate({ 
        marginTop: 0 
       }, 500, function(){ 
        // After appending the lists list, make the task list sortable. 
        $('#lists-list').sortable({ 
         cursor: 'move', 
         update: function(event, ui) { 
          var newOrder = $(this).sortable('serialize'); 
          $.ajax({ 
           url: siteUrl+"lists/reorder/"+data['result']['user_id']+"?"+newOrder, 
           async:true, 
           type:'GET', 
           dataType:'json', 
           success:function (data, textStatus) { 
            console.log(data); 
           } 
          }); 
         } 
        }); 

        // Ensure to add the open class. 
        $('#lists-toggle').addClass('open'); 
       }); 
      } 
     }); 
    } 
    return false; 
});

來源

2011-10-08 Eric

的問題是，所有的列表項浮動。清除父元素修復了這個問題，並允許我使用$（element）.outerHeight（）來獲取高度。

來源

2011-10-10 17:17:16 Eric

JQuery高度不適用於浮動元素

回答

相關問題