「jqueryで上下左右でスライドして表示・非表示」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

jqueryで上下左右でスライドして表示・非表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jqueryで上下左右でスライドして表示・非表示</title>
<script href="//www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.4");
google.load("jqueryui", "1.7");
</script>
<script type="text/javascript">
(function($) {
$.extend({
slideEx: function(argElment, argDirection, argDelay) {
argElment.queue(function(){
if ($(this).css("display") == "none"){
$(this).show("slide", {direction: argDirection}, argDelay, function(){
$(this).clearQueue();
});
}
else {
$(this).hide("slide", {direction: argDirection}, argDelay, function(){
$(this).clearQueue();
});
}
$(this).dequeue();
});
}
});
})(jQuery);
function test(argDirection) {
$.slideEx($("#wp"), argDirection, 1000);
}
</script>
</head>
<body>
<h1>jqueryで上下左右でスライドして表示・非表示</h1>
<button onClick="test('right');">表示・非表示：右</button>
<button onClick="test('left');">表示・非表示：左</button>
<button onClick="test('up');">表示・非表示：上</button>
<button onClick="test('down');">表示・非表示：下</button>
<div id="wp" style="background:#ffeeee;border:1px solid #eedddd;padding:1em;margin-top:1em;">
ここの部分が表示・非表示される<br />
<br />
お腹が空いた！<br />
丸ごとしまうまを食べることが出来るぐらいお腹が空いた！<br />
</div>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>