2
Jquery fade 토글, 1000ms, 1500ms, 200ms 등 각 버튼에 페이드 효과 지연을 추가하려면 어떻게해야합니까? 이미 페이드 토글이 있기 때문에 혼란 스럽습니다. 사전Jquery fade는 각 버튼에 페이드 효과를 추가하는 방법을 토글합니다.
<!DOCTYPE html>
<html>
\t <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>
\t \t \t \t <button class="btn btn-xlarge hvr-float-shadow btn-info" id="bc">Building </br> Construction</button><br><br> \t
<center id ="menu1">
\t \t \t \t <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>
\t \t \t \t <div id="div2"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left" id="bldg">Exemption Certificate</button><br><br></div>
\t \t \t \t <div id="div3"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left" id="bldg">Conversion Order</button><br><br></div>
\t \t \t \t <div id="div4"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-left" id="bldg">EEC/CNC</button><br><br></div> \t
</center>
\t \t \t \t <button class="btn btn-xlarge hvr-float-shadow btn-primary" id="sm">Subdivision<br>Memorial</button><br><br>
<center id="menu2">
\t \t \t \t
\t \t \t \t
\t \t \t \t <div id="div5"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right"id="sub">Preliminary Approval</button><br><br></div>
\t \t \t \t <div id="div6"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right" id="sub">Development Permit</button><br><br></div>
\t \t \t \t <div id="div7"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right" id="sub">Alteration Plan</button><br><br></div>
\t \t \t \t <div id="div8"><button class="btn btn-lg form-btn btn-col hvr-bounce-to-right"id="sub">Simple Subdivision</button><br><br></div>
\t \t \t </center>
</body>
</html>
jsFiddle에 예를 들어 당신이 어떻게 다른 타이밍에 기존 페이드를 변경하려면 묻는
? –
아니 그냥 큰 버튼을 클릭 한 후 나타나는 작은 버튼에 지연 기능을 추가합니다. –