2

我发现这个 jQuery 动画脚本 -> 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});
});
4

0 回答 0