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

Question

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>

Answer 1

我使用了一个动画库 (velocity.js) 来为您的示例添加一些有趣的东西:)

据我了解，您想让子菜单延迟打开（错开）

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

我还稍微重构了您的代码。

您在 jsFiddle

中的示例

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

Jquery fade toggle how to add fade effect in each button

html

javascript

css

jquery

fade