点击动画div并制作全宽jQuery

时间:2017-04-05 12:13:09

标签: javascript jquery html css animation

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

  1. 点击第一个div时 - 它应该动画到右边覆盖其他div
  2. 点击第二个div时 - 它应该是左右动画
  3. 当点击第三个div时 - 它应该是左边的动画
  4. 它似乎按预期工作但是动画不是预期的,它的跳跃,我如何让它流畅?

    以下是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>
    &#13;
    &#13;
    &#13;

1 个答案:

答案 0 :(得分:5)

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

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

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

希望这有帮助。