Question

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

点击第一个div时 - 它应该动画到右边覆盖其他div
点击第二个div时 - 它应该是左右动画
当点击第三个div时 - 它应该是左边的动画

它似乎按预期工作但是动画不是预期的，它的跳跃，我如何让它流畅？

＆＃13;

$(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);
  });
});

＆＃13;

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%;
}

＆＃13;

<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;

Answer 1

我通过在触发动画之前将div的z-index设置为2来实现它：

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

检查此fiddle以查看有效示例。

希望这有帮助。

点击动画div并制作全宽jQuery

1 个答案: