javascript - jquery fade toggle各ボタンにフェード効果を追加する方法

原文 javascript jquery html css fade

jqueryのフェードトグル、1000ミリ秒、1500ミリ秒、200ミリ秒など、各ボタンにフェード効果の遅延を追加するにはどうすればよいですか?divにすでにフェードトグルがあるため、混乱しています



<!DOCTYPE html>
<html>
	<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style type="text/css"><!--
#menu1 {
 display:none;
}
--></style>
<style type="text/css"><!--
#menu2 {
 display:none;
}
--></style>

<script type="text/javascript"><!--
var cnts = 0;          // sets a variable to store the number of clicks

$(document).ready(function() {  
  $('#bc').click(function() {
    // fades #menu, with a speed of 1000 milliseconds
    // then increments the value of "cnts" variable by 1 and adds it in the tag id="cnt"
    $('#menu1').fadeToggle(1000, function() {
      cnts++;
      $('#cnt').text(cnts);
    });
  });
});
--></script>
<script type="text/javascript"><!--
var cnts = 0;          // sets a variable to store the number of clicks

$(document).ready(function() {
  $('#sm').click(function() {
    // fades #menu, with a speed of 1000 milliseconds
    // then increments the value of "cnts" variable by 1 and adds it in the tag id="cnt"
    $('#menu2').fadeToggle(1000, function() {
      cnts++;
      $('#cnt').text(cnts);
    });
  });
});
--></script>
				<button class="btn btn-xlarge hvr-float-shadow btn-info" id="bc">Building </br> Construction</button><br><br>	
<center id ="menu1">
				<div id="div1"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left"id="bldg"data-toggle="modal" data-target="#locationalClearance">Locational Clearance</button><br><br></div>
				<div id="div2"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left"  id="bldg">Exemption Certificate</button><br><br></div>
				<div id="div3"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left" id="bldg">Conversion Order</button><br><br></div>
				<div id="div4"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left" id="bldg">EEC/CNC</button><br><br></div>	
</center>



				<button class="btn btn-xlarge hvr-float-shadow btn-primary" id="sm">Subdivision<br>Memorial</button><br><br>
<center id="menu2">
				
				
				<div id="div5"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right"id="sub">Preliminary Approval</button><br><br></div>
				<div id="div6"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right" id="sub">Development Permit</button><br><br></div>
				<div id="div7"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right" id="sub">Alteration Plan</button><br><br></div>
				<div id="div8"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right"id="sub">Simple Subdivision</button><br><br></div>
			</center>


</body>
</html>
答え
アニメーションライブラリ(velocity.js)を使用して、例にさらにファンキーさを追加しました:)

私が理解しているように、サブメニューを遅らせて開くようにしたかった(ずらして)

$('div').velocity("transition.bounceOut", {
            stagger: 100
        });


また、コードを少しリファクタリングしました。

jsFiddleの例
関連記事

javascript - キープレスのリダイレクト用のAngularJSコードは、サービスまたはディレクティブでなければなりませんか?

javascript - AngularJS-/以外のパスでパーシャルが読み込まれない

javascript - angularjsドラッグアンドドロップHTMLコンテンツ

javascript - コンテンツをXMLファイルに更新する

java - URLヒット時のエラー、filenotfoundexceptionによると

javascript - Googleスクリプトは日付に基づいてスプレッドシート間で範囲をコピーします

javascript - JavaScript:別のスクリプトに追加されたdivへのアクセスなし

javascript - nodejsのセッションは部分的に保存されています

javascript - マーカー位置json LeafletとWebGLEarthを更新

javascript - JSON:スラッシュがエスケープされるのはなぜですか?