この記事の例では、jQuery が slideUp メソッドを使用して、要素がゆっくりと折りたたまれるように制御する機能を実現する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html>
<html>
<head>
<script src= "js/jquery.min.js" >
</script>
<script>
$(document).ready( function (){
$( "#flip" ).click( function (){
$( "#panel" ).slideUp( "slow" );
});
});
</script>
<style type= "text/css" >
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
}
</style>
</head>
<body>
<div id= "flip" >Click to slide up panel</div>
<div id= "panel" >Hello world!</div>
</body>
</html>
|
ログイン後にコピー
この記事が皆さんの jQuery プログラミングに役立つことを願っています。