簡単なスライドjQuery

クリックすると、隠された要素がスライドに表示される基本的なjQueryのサンプルです。

例:

<head>
<style>
#side{
float:right;
width:50px;
height:50px;
background: #428D9B;
}

.hide{
display:none;
}

#slidable{
float:right;
height:50px;
background:#F4F4F4
width:200px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$( "#side" ).click(function() {
$('#slidable').animate({width: 'toggle'});
});
})
</script>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body>

<div id="container">
<div id="slidable"class="hide"><b>무엇을 도와드릴까요?</b><br>도움이 필요하세요?</div>
<div id="side">Help</div>
</div>
</body>

ここでクドゥと実行を確認することができます。

(Source:http://stackoverflow.com/)

一部の記事にはアフィリエイトリンクが含まれている場合があり、パートナーの活動で一定額の手数料を受け取ることがあります。

コメントを残す

*電子メール情報は公開されません。