ahomu/gist:877105

## gistfile1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>わくわくjQuery編</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script >
<script type="text/javascript">
$(function()
{
    // ★ 画像の読み込みをテキトーに待つよ
    $('#slideImages').fadeIn(1500);

    // ★ 画像の読み込みを丁寧に待つよ
//    var size = $('#slideImages img').size();
//    var load = 0;
//    $('#slideImages img').load(function(){
//        load += 1;
//        if ( load === size ) {
//            $('#slideImages').fadeIn('slow');
//        }
//    });

    // ★ 3000msごとに以下の処理を実行するよ
    setInterval(function()
    {
        // シンプル：最後尾のimg要素を，先頭に動かす
        $('#slideImages img:last').prependTo($('#slideImages'));

        // 少しリッチ：最後尾のimg要素を，slowでフェードアウトしてから，先頭に動かす
//        $('#slideImages img:last').fadeOut('slow', function()
//        {
//            $('#slideImages img:last').prependTo($('#slideImages')).show();
//        });
    }, 3000);

    // ★ ホバー時に定期処理を止めるよ版
//    var timer = setInterval(business, 3000);
//    var func  = function(){};
//    $('#slideImages').hover(function()
//    {
//        clearInterval(timer);
//    }, function()
//    {
//        timer = setInterval(business, 3000);
//    });

    /*--------------------------------------------------------------*/

    // ★ ボタンをクリックしたら，ボディを表示する
    $('#continueBtn').click(function()
    {
        $('#continueBody').show();
//        $('#continueBody').slideDown('fast');
//        $('#continueBody').fadeIn('slow');
    });

    /*--------------------------------------------------------------*/

    // ★ ボタンをクリックしたら，ボディの表示/非表示を切り替える
    $('#panelBtn').click(function()
    {
        $('#panelBody').toggle();
//        $('#panelBody').slideToggle('fast');
//        $('#panelBody').fadeToggle('slow');
    });
});
</script>
</head>
<body>

<style type="text/css">
#slideImages {
    display: none;
    position: relative;
    width: 640px;
    height: 426px;
}
#slideImages img {
    position: absolute;
    top: 0;
    left: 0;
}
</style>
<div id="slideImages">
    <img id="image_1" src="http://farm6.static.flickr.com/5094/5480477645_5c9f0e9ff9_z.jpg" width="640" height="426" alt="" />
    <img id="image_2" src="http://farm6.static.flickr.com/5138/5447248318_1db5635ede_z.jpg" width="640" height="426" alt="" />
    <img id="image_3" src="http://farm6.static.flickr.com/5015/5447248214_291358f784_z.jpg" width="640" height="426" alt="" />
    <img id="image_4" src="http://farm6.static.flickr.com/5136/5447248382_03c34386da_z.jpg" width="640" height="426" alt="" />
</div>

<!-- ******************************************************************************************************** -->

<style type="text/css">
#continueBody {
    display: none;
}
</style>
<div>
    <p>
        私も前まあそうした焦燥どもというのの時にするないた。
        やはり平生が研究学はちゃんとわが真似ないたまでにありて得るらしくがは推薦見んなから、実際にはあるたないですた。
        徳義心からなるませのも何でもかでも結果でいくらでもないなけれです。とうとう木下さんを修養事とても仮定を願っらし西洋その資格これか所有をってお誤認たらしくないんから、そんな今は私か人数他人となっから、向さんののを年々歳々のそれへもっとご教育とあらであなた釣をご想像を済んようにいやしくもご撲殺としたませて、近頃すこぶる戦争にいうべきで始めですものを立ち行かたで。
        またところがご頭であっのは少し不安とあるですて、そのろがはさあるがという国をしが行くなりです。<a href="#" id="continueBtn">続きを読む</a>
    </p>

    <p id="continueBody">
        その時堅めの日この坊ちゃんもそれいっぱいとさたかと三宅君よりもっるまし、大学の朝ですというご圧迫ないないたけれども、個性の中に責任がほかなどの権力から平生立たでいただくから、それほどの今日にするてそんな日とけっして呑み込むたですといいない事なけれが、ほどよくななけれと実際ご腹抜いたのただた。また地位かめちゃくちゃか留学を使いないと、今中飯と進まといましところへお意見のほかより尽すでしな。平生をもあに廻るば籠ったですななけれて、もしきっとなって忠告はもう少し悪いんはずた。
        及び今抑圧でおりでは得るです点でしので、私立のも、おもにあなたか行って済んれたな上げよれですうと思うて、自分もしてくれないます。あたかもけっしてもついかごに対して過ぎんから、己がは場合上だけ私の同攻撃は高い忘れならないない。私はちょうど説明のものにご演説も焼いけれどもいるたでしたくなから、二万の巡査が突然いうなとして発展ありから、またそうした大名の弟に叫びられから、私かから何の間断に答弁を述べるからいるな事たならと経験聞きば干渉できるいけませた。
        通りへただ大森さんにまたそう愛しない事んないだ。岡田君は当然状態を知っから云ったのただん。（なお事に出時でしないんてべきも立ったないて、）いっそ突っついある他人が、ジクソンの先生かも作っばあれとして、背後の尊重はほかの頃だけ妨げなっ事でするませて反対式落ちつけるているますというご事ですのな。
    </p>
</div>

<!-- ******************************************************************************************************** -->

<style type="text/css">
#panelWrapper {
    position: absolute;
    top: 10px;
    right: 10px;

    width : 120px;
    height: 20px;

    border: 2px outset gray;
    cursor: pointer;
}
#panelWrapper:hover {
    background-color: #eeeeee;
}
#panelBody {
    display: none;

    position: absolute;
    top: 22px;
    left: 0;

    width : 120px;

    background-color: #f0f0f0;
}
</style>
<div id="panelWrapper">
    <span id="panelBtn">メニュ</span>
    <div id="panelBody">
        <ul>
            <li>メニュー1</li>
            <li>メニュー2</li>
            <li>メニュー3</li>
        </ul>
    </div>
</div>


</body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8" />
	<title>わくわくjQuery編</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script >
	<script type="text/javascript">
	$(function()
	{
	// ★ 画像の読み込みをテキトーに待つよ
	$('#slideImages').fadeIn(1500);

	// ★ 画像の読み込みを丁寧に待つよ
	// var size = $('#slideImages img').size();
	// var load = 0;
	// $('#slideImages img').load(function(){
	// load += 1;
	// if ( load === size ) {
	// $('#slideImages').fadeIn('slow');
	// }
	// });

	// ★ 3000msごとに以下の処理を実行するよ
	setInterval(function()
	{
	// シンプル：最後尾のimg要素を，先頭に動かす
	$('#slideImages img:last').prependTo($('#slideImages'));

	// 少しリッチ：最後尾のimg要素を，slowでフェードアウトしてから，先頭に動かす
	// $('#slideImages img:last').fadeOut('slow', function()
	// {
	// $('#slideImages img:last').prependTo($('#slideImages')).show();
	// });
	}, 3000);

	// ★ ホバー時に定期処理を止めるよ版
	// var timer = setInterval(business, 3000);
	// var func = function(){};
	// $('#slideImages').hover(function()
	// {
	// clearInterval(timer);
	// }, function()
	// {
	// timer = setInterval(business, 3000);
	// });

	/--------------------------------------------------------------/

	// ★ ボタンをクリックしたら，ボディを表示する
	$('#continueBtn').click(function()
	{
	$('#continueBody').show();
	// $('#continueBody').slideDown('fast');
	// $('#continueBody').fadeIn('slow');
	});

	/--------------------------------------------------------------/

	// ★ ボタンをクリックしたら，ボディの表示/非表示を切り替える
	$('#panelBtn').click(function()
	{
	$('#panelBody').toggle();
	// $('#panelBody').slideToggle('fast');
	// $('#panelBody').fadeToggle('slow');
	});
	});
	</script>
	</head>
	<body>

	<style type="text/css">
	#slideImages {
	display: none;
	position: relative;
	width: 640px;
	height: 426px;
	}
	#slideImages img {
	position: absolute;
	top: 0;
	left: 0;
	}
	</style>
	<div id="slideImages">
	<img id="image_1" src="http://farm6.static.flickr.com/5094/5480477645_5c9f0e9ff9_z.jpg" width="640" height="426" alt="" />
	<img id="image_2" src="http://farm6.static.flickr.com/5138/5447248318_1db5635ede_z.jpg" width="640" height="426" alt="" />
	<img id="image_3" src="http://farm6.static.flickr.com/5015/5447248214_291358f784_z.jpg" width="640" height="426" alt="" />
	<img id="image_4" src="http://farm6.static.flickr.com/5136/5447248382_03c34386da_z.jpg" width="640" height="426" alt="" />
	</div>

	<!-- ******************************************************************************************************** -->

	<style type="text/css">
	#continueBody {
	display: none;
	}
	</style>
	<div>
	<p>
	私も前まあそうした焦燥どもというのの時にするないた。
	やはり平生が研究学はちゃんとわが真似ないたまでにありて得るらしくがは推薦見んなから、実際にはあるたないですた。
	徳義心からなるませのも何でもかでも結果でいくらでもないなけれです。とうとう木下さんを修養事とても仮定を願っらし西洋その資格これか所有をってお誤認たらしくないんから、そんな今は私か人数他人となっから、向さんののを年々歳々のそれへもっとご教育とあらであなた釣をご想像を済んようにいやしくもご撲殺としたませて、近頃すこぶる戦争にいうべきで始めですものを立ち行かたで。
	またところがご頭であっのは少し不安とあるですて、そのろがはさあるがという国をしが行くなりです。<a href="#" id="continueBtn">続きを読む</a>
	</p>

	<p id="continueBody">
	その時堅めの日この坊ちゃんもそれいっぱいとさたかと三宅君よりもっるまし、大学の朝ですというご圧迫ないないたけれども、個性の中に責任がほかなどの権力から平生立たでいただくから、それほどの今日にするてそんな日とけっして呑み込むたですといいない事なけれが、ほどよくななけれと実際ご腹抜いたのただた。また地位かめちゃくちゃか留学を使いないと、今中飯と進まといましところへお意見のほかより尽すでしな。平生をもあに廻るば籠ったですななけれて、もしきっとなって忠告はもう少し悪いんはずた。
	及び今抑圧でおりでは得るです点でしので、私立のも、おもにあなたか行って済んれたな上げよれですうと思うて、自分もしてくれないます。あたかもけっしてもついかごに対して過ぎんから、己がは場合上だけ私の同攻撃は高い忘れならないない。私はちょうど説明のものにご演説も焼いけれどもいるたでしたくなから、二万の巡査が突然いうなとして発展ありから、またそうした大名の弟に叫びられから、私かから何の間断に答弁を述べるからいるな事たならと経験聞きば干渉できるいけませた。
	通りへただ大森さんにまたそう愛しない事んないだ。岡田君は当然状態を知っから云ったのただん。（なお事に出時でしないんてべきも立ったないて、）いっそ突っついある他人が、ジクソンの先生かも作っばあれとして、背後の尊重はほかの頃だけ妨げなっ事でするませて反対式落ちつけるているますというご事ですのな。
	</p>
	</div>

	<!-- ******************************************************************************************************** -->

	<style type="text/css">
	#panelWrapper {
	position: absolute;
	top: 10px;
	right: 10px;

	width : 120px;
	height: 20px;

	border: 2px outset gray;
	cursor: pointer;
	}
	#panelWrapper:hover {
	background-color: #eeeeee;
	}
	#panelBody {
	display: none;

	position: absolute;
	top: 22px;
	left: 0;

	width : 120px;

	background-color: #f0f0f0;
	}
	</style>
	<div id="panelWrapper">
	<span id="panelBtn">メニュ</span>
	<div id="panelBody">
	<ul>
	<li>メニュー1</li>
	<li>メニュー2</li>
	<li>メニュー3</li>
	</ul>
	</div>
	</div>



	</body>
	</html>