jQuery でスライドアップやスライドダウンのアニメーションをする方法

スポンサーリンク
メニューやナビゲーションで、クリックしたらさらに細かいメニューを
出したり、隠したりすることがあります。
にょきにょきっとメニューをアニメーションさせて、面白いな演出を
やったりします。

jQueryを使って、スライドアップやスライドダウンのアニメーションを
簡単に行うことができます。
それぞれ、 slideUp()、slideDown()を呼ぶだけで実現できます。


サンプルコード

<html>
	<head>
		<title>jQuery</title>
	</head>
	<body>
		<button id="up" onClick="slideUp();">slide up</button>
		<button id="down" onClick="slideDown();">slide down</button>
		<div id="message" style="width: 200px;">
		Hi Hoge-san, jQueryがすごいよ。
		アニメーションが非常に簡単にできちゃいます。</div>
	</body>
	<script type="text/javascript" src="jquery-1.2.3.min.js"></script>
	<script type="text/javascript"><!--
		function slideUp(){
			$('#message').slideUp();
		}
		function slideDown(){
			$('#message').slideDown();
		}
	//-->
	</script>
</html>

slide upのボタンを押すと、messageのエリアがスライドアップし、
slide downのボタンを押すと、messageのエリアがスライドダウンします。

メニューやナビゲーションなどをアニメーションするのに効果的かと
思います。
スポンサーリンク
スポンサーリンク
 
いつもシェア、ありがとうございます！
Twitter
Facebook
LINE
Pocket
はてぶ
RSS

もっと情報を探しませんか？

関連記事

最近の記事

人気のページ

スポンサーリンク
 

過去ログ

2020 : 01 02 03 04 05 06 07 08 09 10 11 12
2019 : 01 02 03 04 05 06 07 08 09 10 11 12
2018 : 01 02 03 04 05 06 07 08 09 10 11 12
2017 : 01 02 03 04 05 06 07 08 09 10 11 12
2016 : 01 02 03 04 05 06 07 08 09 10 11 12
2015 : 01 02 03 04 05 06 07 08 09 10 11 12
2014 : 01 02 03 04 05 06 07 08 09 10 11 12
2013 : 01 02 03 04 05 06 07 08 09 10 11 12
2012 : 01 02 03 04 05 06 07 08 09 10 11 12
2011 : 01 02 03 04 05 06 07 08 09 10 11 12
2010 : 01 02 03 04 05 06 07 08 09 10 11 12
2009 : 01 02 03 04 05 06 07 08 09 10 11 12
2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12

サイト

Vim入門

C言語入門

C++入門

JavaScript/Node.js入門

Python入門

FreeBSD入門

Ubuntu入門

セキュリティ入門

パソコン自作入門

ブログ

トップ

プライバシーポリシー