Question

我需要淡入最初使用display：none隐藏的隐藏div。当它们淡入时，我需要显示“内嵌块”而不是“阻塞”，这样它们就可以相互内联而不是相互下降。这可能吗？

.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

请尝试使用.fadeTo()。据我所知，这不会影响display属性。

Answer 2

试试这个：

.sectionBlock {
   opacity: 0;
}

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

或者你可以float div：

.sectionBlock {
   float: left
}

Answer 3

我采取了不同的思考方式。我现在将所有的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');
                }
            });
        });

jQuery的。 fadeIn（）“inline-block”元素将它们设置为块

3 个答案: