Question

Jquery淡入淡出切换，如何在每个按钮中添加淡入淡出效果延迟1000毫秒，1500毫秒，200毫秒等等它让我感到困惑，因为在div中已经有淡入淡出切换。提前谢谢

＆＃13;

<!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>

＆＃13;

Answer 1

我使用动画库（velocity.js）为你的例子添加更多的funkiness：）

据我了解你想让子菜单以延迟（错开）

打开

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

我还重新考虑了你的代码。

jsFiddle

中的示例

Jquery淡入淡出切换如何在每个按钮中添加淡入淡出效果

1 个答案: