我正在尝试创建一个互动,它应该像下面这样工作:
它似乎按预期工作但是动画不是预期的,它的跳跃,我如何让它流畅?
$(document).ready(function(){
$(".column").height(winh);
$(".first-col").click(function(){
$(".first-col").animate({width:winw, left:0, zIndex:2}, 3000);
});
$(".second-col").click(function(){
$(".second-col").animate({width:winw, left:0, right:0, zIndex:2}, 2000);
});
$(".third-col").click(function(){
$(".third-col").animate({width:winw, left:0, zIndex:2}, 2000);
});
});

body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100%;
float: left;
height: 100%;
}
.wrapper > .column {
width: 33.3333%;
position: absolute;
top: 0;
height: 100%;
z-index: 1;
text-align:center;
}
.first-col {
background: #cdcdcd;
left: 0;
}
.second-col {
background: #dadada;
left: 33.3333%;
}
.third-col {
background: #bababa;
left: 66.6666%;
}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
<div class="column first-col">
<h1>Title Here</h1>
<p>content here</p>
</div>
<div class="column second-col">
<h1>Title Here</h1>
<p>content here</p>
</div>
<div class="column third-col">
<h1>Title Here</h1>
<p>content here</p>
</div>
</div>
&#13;
答案 0 :(得分:5)
我通过在触发动画之前将div的z-index设置为2来实现它:
$(".first-col").css('z-index', '2');
$(".first-col").animate({width:winw, left:0}, 3000);
检查此fiddle以查看有效示例。
希望这有帮助。