Question

我正在创建一个div，它会显示在按钮上单击并隐藏再次单击。我正在使用jquery的toggleClass函数。问题是我需要动画，而div打开和关闭。我尝试过转换：1s，在所有相关课程中，甚至在身体上，但是徒劳无功。这是小提琴：http://jsfiddle.net/9dq2p7dw/105/

以下是我的jquery的代码：

$(document).ready(function(){
$(".view").click(function(){

$(".view-more").toggleClass("hide show", 500);

});

});

Answer 1

您可以使用.fadeToggle

$(document).ready(function(){
$(".view").click(function(){

$(".view-more").fadeToggle( "hide show", "linear" );

});

});

.hide{
  display:none;
}
.show{
  display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide" >

<div class="col-md-6">
 <h1>
 asasasas
 </h1>
</div>

<div class="col-md-6">

 <h1>
 sasasas
 </h1>

</div>

</div>

Answer 2

使用transition: all 0.3s ease;

参考CSS transitions

＆＃13;

$(document).ready(function() {
  $(".view").click(function() {

    $(".view-more").toggleClass("hide show", 500);

  });

});

＆＃13;

.hide {
  opacity: 0;
  transition: all 1s ease;
}

.show {
  opacity: 1;
  transition: all 1s ease;
}
.view-more{
background-color:#F0C798;
padding:10px;
box-sizing:border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide">

  <div class="col-md-6">
    <h1>
      asasasas
    </h1>
  </div>

  <div class="col-md-6">

    <h1>
      sasasas
    </h1>

  </div>

</div>

＆＃13;

JS Fiddle Link

Answer 3

如果您只想隐藏并在点击按钮时显示div，则可以更简单的方式执行此操作。

 $(".view").click(function(){

    $(".view-more").toggle(function() {
        $(this).animate({height: '200'});
}, function() {
        $(this).animate({height: '100'});
    });

    });

当给定函数列表作为参数时，.toggle（fn1，fn2）方法将在从第一个函数开始给出的函数之间交替。这会自动跟踪您的切换状态 - 您无需这样做。

jQuery doc是here。根据所使用的参数，有多种形式的.toggle（），因此在搜索jQuery文档时，您并不总能找到正确的参数。

Answer 4

试试这个，你不能动画显示，而不是尝试这个，可能这会帮助你

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  .col-md-6{
    background:red;
  }
 
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<a class="view">View All</a>
<div class="view-more hide" >

<div class="col-md-6">
 <h1>
 asasasas
 </h1>
</div>

<div class="col-md-6">

 <h1>
 sasasas
 </h1>

</div>

</div>
 
<script>


$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggle(500);
});

});
</script>
 
</body>
</html>

如何在Jquery中的toggleClass功能中添加动画

4 个答案: