Jquery fade toggle how to add fade effect in each button

Question

Jquery fade toggle, how can I to add fade effect delay in each button for 1000 ms, 1500 ms ,200ms etc it confuses me because there is already a fade toggle in the div .thanks in advance

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

I used an animation library ( velocity.js ) to add some more funkiness to your example :)

As i understand you wanted to make the sub menu to open with a delay (stagger)

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

Also i re-factored your code a little bit.

your example in jsFiddle

Jquery fade toggle how to add fade effect in each button

Question

1 answers

solution1
0 ACCPTED 2015-01-20 14:05:54

Jquery fade toggle how to add fade effect in each button

Question

1 answers

solution1 0 ACCPTED 2015-01-20 14:05:54

solution1
0 ACCPTED 2015-01-20 14:05:54