Question

我在这里有一个快速滑块，在初始页面加载时给我一些麻烦。溢出假设被隐藏，但是当它被加载时 - 隐藏div的一部分显示大约1秒钟，然后隐藏。

我还有一个小提琴链接：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/

CSS / Jquery OverFlow隐藏不起作用

1 个答案: