Question

我发现了这个jQuery动画脚本 - ＆gt; http://jsfiddle.net/steweb/dsHyf/当我独立尝试时，它对我来说非常好。但是，只要我想使用display：table-cell和％-widths将它包含在我的响应式布局中，一切看起来都不合适。

我希望.full能够填充.cell的100％宽度和高度。是否可以将其调整为流体布局而不是固定宽度？我已经尝试了几个小时......或者有更好的解决方案吗？

我只想交换第一个显示标题的“图块”，第二个“图块”显示带有平滑动画效果的文字/列表。

另外，我想在同一页面上多次使用此脚本。我该怎么办？

HTML：

<div class="container">
    <div class="sidebar">
        <h1>Text</h1>
    </div>
    <div class="cell">
        <div id="wrapper">
            <div class="full" id="div1"></div>
            <div class="full" id="div2"></div>
        </div>
    </div>
    <div class="cell">
        <div id="wrapper">
            <div class="full" id="div1"></div>
            <div class="full" id="div2"></div>
        </div>
    </div>
</div>

CSS：

#wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
    height:100%;
}
.full{
    position:absolute;
    width:100%;
    height:100%;
}
#div1{
    background:#FF0000;
    left:0px;
}
#div2{
    display:none;
    background:#FFFF00;
}

.container{
    display: table;
    width: 100%;
}

.cell{
    display: table-cell;
 }

div.container div:nth-child(1){
   width: auto;
}

div.container div:nth-child(2), div.container div:nth-child(3){
   width: 40%
}

JS：

$('#div2').css('left',-$('#wrapper').width()).show();

$('#div1').click(function(){
    $(this).animate({'left':$('#wrapper').width()});
    $('#div2').animate({'left':0});
});

$('#div2').click(function(){
    $(this).animate({'left':-$('#wrapper').width()});
    $('#div1').animate({'left':0});
});

Jquery动画脚本在表格单元格布局中不起作用

0 个答案: