jQuery。 fadeIn（）「inline-block」元素將它們設置爲阻止

Question

我需要淡入最初隱藏的div，它們隱藏着display：none。當它們淡入時，我需要顯示器是「內聯塊」而不是「塊」，因此它們可以彼此內聯顯示，而不是相互下降。這可能嗎？

.sectionBlock{ 
width:163px; 
height: 261px; 
padding:5px 5px; 
position: relative; 
/*display: inline-block;*/ 
display: none; 
overflow: hidden; 
margin: 0 6px 11px 6px; 
} 

。

... 
$('.sectionBlock').fadeIn('slow'); 
... 

Answer 1

我去思考這樣一個不同的方式。我現在將所有的sectionBlocks輸出到一個隱藏的div中，並將它們附加到容器中並將容器淡入。完美地工作。

$('.sectionBlock').clone().appendTo($('.sectionBlockWrapper')); 
$('.sectionBlockWrapper').fadeIn('slow'); 

我克隆他們，因爲我分頁他們，需要清空容器後重用他們。如果有人有興趣，這是我的完整代碼。現在遠不是最佳選擇，但它確實有效：

//work out how many section blocks we have 
     var numberOfElements = $('.sectionBlock').length; //total number of section blocks 
     var maxNumberPerPage = 8; //maximum number of blocks per 1 page layout 
     var maxNumberFL = 7; //maximum number of blocks on the first and last pages 
     var maxNumberMid = 6; //maximum number of blocks on the mid pages 
     var virtualPage = 1; //set the start page to 1 

     //work out the total number of pages 
     var totalPages = 1; 
     if (numberOfElements <= maxNumberPerPage){ 
      //we leave it set to 1 
     } else if (numberOfElements <= (maxNumberFL*2)){ 
      totalPages = 2; 
     } else { 
      totalPages = 2; 
      additionalElements = numberOfElements - (maxNumberFL*2); //because we have 14 for the first and last pages 
      additionalPages = (parseInt(additionalElements/maxNumberMid)+1); 
      totalPages = totalPages + additionalPages; 
     } 

     var nextButton = '<div class="sectionBlock" id="nextButton">Next >></div>' 
     var prevButton = '<div class="sectionBlock" id="prevButton"><< Previous</div>' 


     if (numberOfElements <= maxNumberPerPage){ 
      //1 page 
      $('.sectionBlock').clone().appendTo($('.sectionBlockWrapper')); 
      $('.sectionBlockWrapper').fadeIn('slow'); 
     } else { 
      //we have extra pages so we only show [maxNumberFL] on the page and append the next button 
      $('.sectionBlock:lt('+maxNumberFL+')').clone().appendTo($('.sectionBlockWrapper')); 
      $('.sectionBlockWrapper').append(nextButton); 
      $('.sectionBlockWrapper').fadeIn('slow'); 
     } 


     $('#nextButton').live('click', function(){ 
      $('.sectionBlockWrapper').fadeOut('slow', function(){ 
       $('.sectionBlockWrapper').empty(); 
       virtualPage = virtualPage + 1; 

       if (numberOfElements > (maxNumberFL*2)){ 
        if (virtualPage == totalPages){ 
         //this is the last page of a multi page 
         var startAt = parseInt((maxNumberMid * virtualPage) -4); 
         var endAt = startAt + maxNumberMid; 
         $('.sectionBlock').slice(startAt-1,9999).clone().appendTo($('.sectionBlockWrapper')); 
         $('.sectionBlockWrapper').prepend(prevButton); 
         $('.sectionBlockWrapper').fadeIn('slow'); 
        } else { 
         //this is a mid page of a multi page 
         var startAt = parseInt((maxNumberMid * virtualPage) -4); 
         var endAt = startAt + maxNumberMid; 
         $('.sectionBlock').slice(startAt-1,endAt-1).clone().appendTo($('.sectionBlockWrapper')); 
         $('.sectionBlockWrapper').prepend(prevButton); 
         $('.sectionBlockWrapper').append(nextButton); 
         $('.sectionBlockWrapper').fadeIn('slow'); 
        } 
       } else { 
        //this is the second and last page 
        $('.sectionBlock').slice(maxNumberFL, maxNumberFL*virtualPage).clone().appendTo($('.sectionBlockWrapper')); 
        $('.sectionBlockWrapper').prepend(prevButton); 
        $('.sectionBlockWrapper').fadeIn('slow'); 
       } 
      }); 
     }); 

     $('#prevButton').live('click', function(){ 
      $('.sectionBlockWrapper').fadeOut('slow', function(){ 
       $('.sectionBlockWrapper').empty(); 
       virtualPage = virtualPage - 1; 

       if (numberOfElements > (maxNumberFL*2)){ 
        if (virtualPage == 1){ 
         //this is the first page of a multi page 
         var startAt = parseInt((maxNumberMid * virtualPage) -4); 
         var endAt = startAt + maxNumberMid; 
         $('.sectionBlock').slice(0,maxNumberFL).clone().appendTo($('.sectionBlockWrapper')); 
         $('.sectionBlockWrapper').append(nextButton); 
         $('.sectionBlockWrapper').fadeIn('slow'); 
        } else { 
         //this is a mid page of a multi page 
         var startAt = parseInt((maxNumberMid * virtualPage) -4); 
         var endAt = startAt + maxNumberMid; 
         $('.sectionBlock').slice(startAt-1,endAt-1).clone().appendTo($('.sectionBlockWrapper')); 
         $('.sectionBlockWrapper').prepend(prevButton); 
         $('.sectionBlockWrapper').append(nextButton); 
         $('.sectionBlockWrapper').fadeIn('slow'); 
        } 
       } else { 
        //this is the first page 
        $('.sectionBlock').slice(0, maxNumberFL).clone().appendTo($('.sectionBlockWrapper'));  
        $('.sectionBlockWrapper').append(nextButton); 
        $('.sectionBlockWrapper').fadeIn('slow'); 
       } 
      }); 
     }); 

Answer 2

嘗試使用.fadeTo()來代替。據我所知，這並不影響display財產。

Answer 3

試試這個：

.sectionBlock { 
    opacity: 0; 
} 

$('.sectionBlock').animate({'display': 'inline-block', 'opacity': '1'}, 'slow'); 

或者你可以float的div：

.sectionBlock { 
    float: left 
}