Question

假设我们有一个按钮和一个带有文本的div。我们如何在按下按钮时水平滑动div（使其消失），然后再将其向上滑动到原始宽度，但不使用动画（{width：＆＃34; toggle＆＃ 34;}）命令？
http://codepen.io/AndrewRed/pen/MYmWzg

 <h5>PUSH</h5>
 <div class="container">Hello World</div>

$(document).ready(function(){
  $("h5").click(function(){
   $(".container").animate({width:"0"});
});
});

Answer 1

你可以简单地使用css过渡和类：从你的代码： HTML：

<h5>PUSH</h5>
<div class="container">Hello World</div>

CSS：

h5{
  background: red;
  display: inline-block;
  cursor: pointer;
}
.container{
  background: orange;
  display: inline-block;
  width:90px;
  -webkit-transition: 0.3s, linear;
  -moz-transition: 0.3s, linear;
  -ms-transition: 0.3s, linear;
  -o-transition: 0.3s, linear;
  transition: 0.3s, linear;
}

.container.close{
  width:0;
}

JS：

$(document).ready(function(){
  $("h5").click(function(){
    $(".container").toggleClass('close');
  });

链接到代码： http://codepen.io/anon/pen/mymJYr

jquery水平幻灯片没有切换

1 个答案: