jquery/js＜思い出し編＞

####練習場
ペペロンのことも思い出してあげて下さい。

#1.slideToggle()
ほぼjs書く機会のない人でも1度は使うことがあるんじゃないか系。

##toggle基本

html

<p id="btn">昨日、jqueryの勉強しようと思ったんだけどね・・</p>
<p id="memo">頭が痛くて出来なかったポヨ・・</p>

js

$(function(){
	$("#btn").click(function(){
		$("#memo").slideToggle("slow");
		$("#memo").toggleClass("show");
	});
});

css

#btn {
    cursor: pointer;
}

#memo {
    display: none;
    background: #eee;
}

###結果を見る
http://jsfiddle.net/jackotonashi/89xyh/

#2.toggleClass()
ほぼjs書く機会のない人でも多用する方法。

html

<p>下の変身ボタンでスーパーペペロンに変身しますが、
もう一度クリックすると元に戻ります。</p>
<div>q _ q</div>
<button>変身ボタン</button>

js

$(function(){
    $("button").click(function(){
        $("div").toggleClass("henshin");
    });
});

css

div {
    color: #666;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #666;
    width: 35px;
    height: 35px;
}

button {
    margin-top: 20px;
}

.henshin {
    color: #ff8400;
    background: #fffd56;
    border: 1px solid #ff8400; 
}

###結果を見る
http://jsfiddle.net/jackotonashi/kLPG8/

#3.CSS()

html

<div>p _ p</div>
<button id="hoge">CSSで簡易変身</button>

js

$(function(){
    $('#hoge').click(function(){
        $('div').css("color","#ff0000");
    });
});

###結果を見る
http://jsfiddle.net/jackotonashi/Mqt7x/

#4.if文を使おう

html

<div id="mes">本物の宝箱を当ててね。</div>
<p class="hako1">box</p>
<p class="hako2">box</p>
<p class="hako3">box</p>
<p class="hako4">box</p>
<div id="result">結果</div>

js

$(function(){
    $('p').click(function(){
    if($(this).hasClass('hako3')){
        $('#result').text('当たり');
    }else{
        $('#result').text('はずれ');
    }
    });
});

css

p {
    width: 80px;
    height 80px;
    background: #eee;
    border: 1px solid #999;
    float: left;
    margin-left: 10px;
    padding: 2px 4px;
    cursor: pointer;
}

#result, #mes {
    clear: left;
}

###結果を見る
http://jsfiddle.net/jackotonashi/aJ26L/

#5.scrollTop()

###開発中1
http://jsfiddle.net/jackotonashi/UC224/

###開発中2
http://jsfiddle.net/jackotonashi/9t8mP/

参考：http://iwb.jp/jquery-scrolltop/

##次回にご期待ください。