一、功能
1. 開啟與關閉
$('#loge1 form').slideToggle('fast');
2. 開啟方塊
$('#loge1 form').slideDown('slow');
3. 關閉方塊
$('#loge1 form').slideUp('slow');
3. 設定如下：
fast為200，slow為600. 預設是400
數值 2000 毫秒 設定為 $('#loge1 form').slideToggle(2000);
二、程式範例如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滑動特效的方法</title>
<style type="text/css">
#loge1 p{
margin: 5px;
}
form{
display: none;
padding: 3px;
border: dashed;
}
#loge1{
width: 300px;
}
#open{
width: 100px;
margin: 0;
cursor: pointer;
background-color: red;
color: aquamarine;
padding: 5px;
}
#open2{
width: 100px;
margin: 0;
cursor: pointer;
background-color: orange;
color: aquamarine;
padding: 5px;
}
#open3{
width: 100px;
margin: 0;
cursor: pointer;
background-color: green;
color: aquamarine;
padding: 5px;
}
#open4{
width: 100px;
margin: 0;
cursor: pointer;
background-color: gray;
color: aquamarine;
padding: 5px;
}
#open5{
width: 100px;
margin: 0;
cursor: pointer;
background-color: dimgrey;
color: aquamarine;
padding: 5px;
}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script language="javascript">
$(document).ready(function(){
$('#open').click(function(){
$('#loge1 form').slideToggle('fast');
});
$('#open2').click(function(){
$('#loge1 form').slideToggle('slow');
});
$('#open3').click(function(){
$('#loge1 form').slideToggle(2000); //數值設定2000毫秒
});
$('#open4').click(function(){
$('#loge1 form').slideDown('slow');
});
$('#open5').click(function(){
$('#loge1 form').slideUp('slow');
});
});
</script>
</head>
<body>
<div id="loge1">
<p id="open">fast 速度</p>
<p id="open2">slow 速度</p>
<p id="open3">2000毫秒 速度</p>
<p id="open4">打開方塊</p>
<p id="open5">關閉方塊</p>
<form id="form1" name="form1" method="post">
<label for="textarea">輸入資料:</label>
<textarea name="textarea" id="textarea"></textarea>
<input type="submit">
</form>
</div>
</body>
</html>
留言列表
程式語法 (11)
