jQuery .show(); function not displaying all elements that were previously hidden

Can somebody help me please? I need to hide the .jshowoff-link element before the rest of the jQuery builds the list of elements. I then show the same element at the end.

It produces a list of images within links. For some reason though it only displays the first image and link and not the others.

I've tried swapping the position of the .show(); function and adding it inside the last if else statement, and that doesn't work either.

This is all done to stop the list of images and links being shown before the .jshowoff(); function triggers.

So I'm all out of ideas. Can anybody help?

// hide banners to begin with
$ ('.jshowoff-link').hide();

// this function wraps the elements in the neccessary tags to work with anything Slider
$ (document).ready(function() {
    $('a.jshowoff-link')
        .wrap('<li class="jshowoff-slide"></li>');
    $('li.jshowoff-slide')
        .wrapAll('<ul id="jshowoff"></ul>');
    // figures out if there's more than one <li> being produced
    if (banners.length > 1) {
        // if so, build the jshowoff
        $('#jshowoff').jshowoff({speed:7000, changeSpeed:1000, autoPlay:true, controls:true, links:true, animatePause:false, hoverPause:false });
        }
    else {
        // if not, disable the function
        $('#jshowoff').jshowoff({speed:7000, changeSpeed:1000, autoPlay:false, controls:false开发者_JAVA百科, links:false, animatePause:false, hoverPause:false });
        }
    // show the jshowoff after it's been built to stop flash of content on slow internet connections
    $('.jshowoff-link').show();
    return false;
    }); 

The problem is this: when jshowoff starts, it removes all child elements from the #jshowoff container and puts them in a variable. It then adds them to the container one by one. Because of this, your links are not in the DOM at the moment you try to show() them. What you could do, is hide the complete jshowoff element before calling jshowoff(), then showing it again after the call has finished:

$ (document).ready(function() {
    $('a.jshowoff-link')
        .wrap('<li class="jshowoff-slide"></li>');
    $('li.jshowoff-slide')
        .wrapAll('<ul id="jshowoff"></ul>');

    var $container = $('#jshowoff');

    $container.hide();

    // figures out if there's more than one <li> being produced
    if (banners.length > 1) {
        // if so, build the jshowoff
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:true, controls:true, links:true, animatePause:false, hoverPause:false });
        }
    else {
        // if not, disable the function
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:false, controls:false, links:false, animatePause:false, hoverPause:false });
        }
    // show the jshowoff after it's been built to stop flash of content on slow internet connections
    $container.show();

    return false;
}); 

If you still get flashing elements, you could also hide the links first, create the container, hide that, show the links again, and then add the jshowoff and show the container again, like this:

// hide banners to begin with
$ ('.jshowoff-link').hide();

$ (document).ready(function() {
    $('a.jshowoff-link')
        .wrap('<li class="jshowoff-slide"></li>');
    $('li.jshowoff-slide')
        .wrapAll('<ul id="jshowoff"></ul>');

    var $container = $('#jshowoff');

    $container.hide();

    // The links are still attached to the DOM at this point, but hidden inside the hidden container.
    $('.jshowoff-link').show();

    // figures out if there's more than one <li> being produced
    if (banners.length > 1) {
        // if so, build the jshowoff
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:true, controls:true, links:true, animatePause:false, hoverPause:false });
        }
    else {
        // if not, disable the function
        $container.jshowoff({speed:7000, changeSpeed:1000, autoPlay:false, controls:false, links:false, animatePause:false, hoverPause:false });
        }
    // show the jshowoff after it's been built to stop flash of content on slow internet connections
    $container.show();

    return false;
});