show hide div onclick jquery slowly when i click the button
Question
i want to show hide div onclick jquery slowly when i click the button.this div will have result from database .i want it when it opened open with slow motion.
<head runat="server">
<title></title>
<script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="script/jquery-1.11.1.min.js">
$(document).ready(function () {
$("#Button1").click(function () {
$("#showdivslowly").slideDown('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>
<asp:Button ID="Button1" runat="server" Text="Button" />
</form>
</body>
2 answers
solution1
2 2014-12-18 13:52:22
Use the toggle function of jQuery:
<script>
$(document).ready(function () {
$("#Button1").click(function () {
$("#showdivslowly").toggle("slow");
});
});
</script>
Toggle function is used to show the div if it is hide and to hide if it is visible.
You can also pass the time in seconds in instead of "slow".
solution2
2 2014-12-18 13:53:13
Few things:
You can't set a src in your script tag and then have script inside that - it must be closed:
Your buttons have a server generated ID (caused by runat="server" ) - so you need to use the ClientID
Your div doesn't need to include runat="server" - I suspect you're only doing this for the Visible="false attribute. Instead, use CSS
slideDown also takes a time in milliseconds as a parameter
<script src="script/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$("#<%=Button1.ClientID%>").click(function () {
$("#showdivslowly").slideDown(2000);
});
});
</script>
<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.