私はdivをクリックして再びクリックすると非表示になるdivを作成しています。jqueryのtoggleClass関数を使用しています。問題は、divが開いたり閉じたりしている間にアニメーションが必要なことです。私はトランジションを試みました：1s、すべての関連クラスで、そして身体でさえ、無駄です。 これはフィドルである：ここではhttp://jsfiddle.net/9dq2p7dw/105/JqueryのtoggleClass functonにアニメーションを追加するには
は私のjqueryのコードです：
$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggleClass("hide show", 500);
});
});
あなたは.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>あなたがしたいすべてのボタンをクリックするとdiv要素を隠し、表示している場合、あなたは簡単な方法で行うことができます。
$(".view").click(function(){
$(".view-more").toggle(function() {
$(this).animate({height: '200'});
}, function() {
$(this).animate({height: '100'});
});
});
引数として関数のリスト、.toggle（FN1、FN2）メソッドは第1から始まる所定の機能を交互うが与え。これにより、自動的にトグル状態が追跡されます。これを行う必要はありません。
jQuery docはhereです。使用される引数に応じて、複数の形式の.toggle（）が存在するため、jQueryのドキュメントを検索する際に常に適切なものを見つけるとは限りません。
使用しtransition: all 0.3s ease;
参照してください使用することができますCSS transitions
$(document).ready(function() {
$(".view").click(function() {
$(".view-more").toggleClass("hide show", 500);
});
});.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;
}<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>、むしろこれを試して、あなたが表示をアニメーション化することはできません、これを試してみてください、これはあなた
<!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>
アニメーションのどのように役立つことができますか？ – nnnnnn
'display'で変更をアニメーション化することはできません。 'height'や' width'、 'opacity'、ほとんどの連続値の変化をアニメートすることができます。 'display'はオンまたはオフです。 jQuery関数 'fadeIn'または' slideDown'などを[ここ]（http://api.jquery.com/category/effects/）から使用して、同様の効果を得ることができます（アニメーション化またはアニメーション化してから非表示にする） 。 nnnnnnが言うように、あなたが起こると予想されるアニメーションの種類を言わない限り、私たちはあなたを助けることはできません。 – Amadan