javascript - 单击动画 div 并制作全宽 jQuery

Question

我正在尝试创建一个交互，它应该像下面这样工作:

1. 当点击第一个 div - 它应该动画以覆盖其他 div
2. 当点击第二个 div - 它应该左右动画
3. 当点击第三个 div - 它应该向左移动

貌似运行正常，但是动画不正常，跳动，如何让它流畅？

这是 JSfiddle demo

$(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>

Answer 1

我通过在触发动画之前将 div 的 z-index 设置为 2 使其工作:

$(".first-col").css('z-index', '2');
$(".first-col").animate({width:winw, left:0}, 3000);

检查这个fiddle查看一个工作示例。

希望对您有所帮助。