CSS / Jquery OverFlow隐藏不起作用答案

【问题标题】：CSS/Jquery OverFlow Hidden not workingCSS / Jquery OverFlow隐藏不起作用
【发布时间】：2013-06-02 21:42:55
【问题描述】：

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

我还有一个小提琴链接：http://fiddle.jshell.net/EXevB/5/show/

当您加载页面时，您可以看到右侧隐藏的部分快速显示约 1 秒钟。我正在努力避免这种情况 - 感谢您提前提供的任何帮助。

谢谢你

JS：变量 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');
});

【问题讨论】：

什么-哦-那是什么图片？
您应该为滑块使用另一个更可靠的代码，如：<ul> <li>slide1</li> <li>slide2</li> </ul>
该死的“输入”键发送我的评论！ :P 我是说，使用该结构，您应该通过 css 设置 ul elem 具有所有 li 的加起来。然后你把它放在一个宽度为一个 li 并且 OVERFLOW HIDDEN 的包装器中。然后你只需移动 ul 的 left 属性 ;)
任何清晰的解决方案更多想法在这里？
您的代码对我来说有点难以理解，但是当我看到这种情况时，通常是使用 JS 而不是 CSS 设置样式的结果。加载 js 可能需要一些时间，并且您的样式表规则往往加载得更快。所以我会将初始样式移动到 CSS 文件中，然后在需要时设置 JS 覆盖它们。也就是说，您希望页面在加载时出现的方式应该由您的样式表决定，而不是您的 js 代码。

标签： javascript jquery html css dom

【解决方案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/

【讨论】：