0

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');
...
4

3 に答える 3

1

これを試して：

.sectionBlock {
   opacity: 0;
}

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

floatまたは、divを使用することもできます。

.sectionBlock {
   float: left
}
于 2012-06-29T02:46:30.227 に答える
1

.fadeTo()代わりに使用してみてください。私の知る限り、それはdisplayプロパティに影響しません。

于 2012-06-29T02:38:54.990 に答える
0

私はこれについて別の考え方に行きました。すべての 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');
                }
            });
        });
于 2012-06-29T05:13:04.533 に答える