隐藏的CSS / JQuery OverFlow不起作用

Question

我这里有一个快速滑块，这给我在初始页面加载时带来了一些麻烦。 假定溢出是隐藏的，但是当它加载时，隐藏的div的右侧部分会在隐藏之前显示大约1秒钟。

我也有一个Fiddle链接： http : //fiddle.jshell.net/EXevB/5/show/

加载页面时，您可以看到右侧的隐藏片段迅速显示了大约1秒钟。 我正在尝试避免这种情况-感谢您对Advance的任何帮助。

谢谢

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

像这样：

 <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>

？

或者，更好的方法（但不知道为什么今天在我的浏览器中$（'＃id'）。css（'display'，'block'）不想工作），您可以将div设置为不可见，并且当页面已加载，使其可见。 如果您想保持自己的结构。

例如，使用z-index可以避免position：absolute，并且使用4个js raws可以达到目的：

<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/