CSS/Jquery OverFlow Hidden not working

Question

I have a quick slider here that is giving me some trouble on initial page load. The Overflow suppose to be hidden but when it loads- right part of the hidden div shows for about 1 second before it is hidden.

I also have a Fiddle Link: http://fiddle.jshell.net/EXevB/5/show/

As you load the page you can see the hidden segment on the right shows quickly for about 1 second. I'm trying to avoid this- Thanks for any help in Advance.

Thanks You

JS: var w = 0;

$('.mainSlide').children().each(function() {
    w += $(this).outerWidth();
});

$('.outer').width(w);
$('.wrap').width(w);
$('.mainSlide').css('left', '480px');

$('.open').toggle(function() {
    $('.mainSlide').stop().animate({left: 0});
    $(this).html('');
    $('.content-text').css('display', 'block');

}, function() {

    $('.mainSlide').stop().animate({left: 480});
    $('.content-text').css('display', 'none');

    $(this).html('OPEN');
});

Answer 1

Something like this:

 <div id="back" class="" style="background: transparent url('http://a.espncdn.com/photo/2013/0209/nba_jordan_00.jpg');height: 257px;
    width: 800px;">

</div>
</div>
<script>
    var w = 0;
    $('#back').html('<div id="dawrap" class="wrap">'+
    '<a class="open" href="#">OPEN</a>'+
    '<div class="outer">'+
       ' <div class="mainSlide">'+
        '<a>'+
         '<img class="content-text" src="" style="margin-left:77px; margin-top:31px; display:none;" />'+
         '<br> <br>'+
         'CONTENT at Default'+
            '</a>'+
        '</div>'+
   ' </div>');
$('.mainSlide').children().each(function() {
    w += $(this).outerWidth();
});

$('.outer').width(w);
$('.wrap').width(w);
$('.mainSlide').css('left', '480px');

$('.open').toggle(function() {
    $('.mainSlide').stop().animate({left: 0});
    $(this).html('');
    $('.content-text').css('display', 'block');

}, function() {

    $('.mainSlide').stop().animate({left: 480});
    $('.content-text').css('display', 'none');

    $(this).html('OPEN');
});


</script>

?

Or, better (but don't know why today on my browsers $('#id').css('display','block') doesn't want to work) you can set the div as invisible and, when the page is loaded, make it visible. If you want to keep your structure.

For example, using z-index let you avoid position:absolute and with a 4 js raws you can do the trick:

<script type="text/javascript">
function domeafavour(){
    if( $('#slider').width()==100) {
        $('#slider').animate({
        width: '600px'},1000);
    }else{
        $('#slider').animate({
        width: '100px'},1000);
    }
}
</script>


 <div id="back" class="" style="background: transparent url('http://a.espncdn.com/photo/2013/0209/nba_jordan_00.jpg');height:257px;width: 800px;">
  <div id="slider" style='cursor:pointer;float:right;height:252;width:100px; z-index:1;background-color:#CF3;'  onClick="domeafavour()">clickme</div>
</div>

http://jsfiddle.net/tSggb/9/