Question

I need to fade in initially hidden divs which are hidden with display:none. When they are faded in, I need the display to be “inline-block” not “block” so they can display inline with each other rather than drop below each other. Is this possible?

.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

I went for a different way of thinking about this. I am now outputting all the sectionBlocks into a hidden div and appending them to the container and fading the container in. Works perfectly.

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

I am cloning them because I am paging them and need to reuse them after emptying the container. If anyone is interested, here is my full code. Far from optimal right now but it does the trick:

//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');
                }
            });
        });