LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQueryについて3

エフェクト(視覚効果)を使う


エフェクトというのはフェードインやフェードアウトのようなものを今回は説明していきます。

まずボックスを用意します。

<body>
 <div id="box" style="width:100px; height:100px;background:red;">
 </div>
</body>




こんな感じのを…

それを消えたり出現させたりしていきます。



隠れる

hide

例:

$('#box').hide('slow');
$('#box').hide(700);



()の中にはミリ秒やfastといった早さも指定できます。
今回はslowで遅くしています。


表示する

show

例:

$('#box').show('slow');



ゆっくり表示させました


ふわっと表示させる

fadeIn

例:

$('#box').fadeIn('slow');



フェードインです

ふわっと消える

fadeOut

例:

$('#box').fadeOut('slow');



フェードアウトです


消したり表示させたりする

toggle


今表示されていたら消して、消されていたら表示する

例:

$('#box').toggle(700);
$('#box').toggle(700);
$('#box').toggle(700);
$('#box').toggle(700);


また、視覚効果には関数を指定できます。

例:

$('#box').fadeOut(800,function(){
 alert("Hi!");
});

これはボックスがフェードアウト後にアラートが出ます



イベントを使う

今回はマウスのイベントを紹介していきます
また、ボックスを表示させてそれにイベントを設定していきます。

クリックイベント

click

例:

$('#box').click(function() {
   alert("Hi");
});



クリックするとアラートが出る

マウスを置いた時

mouseover

例:

$('#box').mouseover(function() {
         $(this).css('background', 'green');
});



マウスを乗せるとボックスが緑色になる

マウスを離した時

mouseout

例:

$('#box').mouseout(function() {
         $(this).css('background','red');
});



マウスを離すと赤色になる


続けても書ける

例:

$('#box')
.mouseover(function(){
	$(this).css('background',green);
})

.mouseout(function(){
	$(this).css('background',red);
});



マウスを乗せた時は緑、離した時は赤色になる


マウスが動いている時

mousumove

例: ボックスの座標をとる

$('#box').mousemove(function(e) {
     $(this).text(e.pageX);
});



X座標をとります


フォーカスを使う

フォームのみで使用が可能です。

フォーカスが当たったら

focus

例:

<input type="text" id="name">
<select id="members" name="members">
           <option>lotos</option>
           <option>helo</option>
           <option>hei</option>
</select>

$(function() {
            $('#name').focus(function() {
            $(this).css('background','red')
            });
});



ここではテキストボックスとセレクトボックスを作成しました。
クリックしてアクティブにした時に、背景色が赤になります。


フォーカスが外れたら

blur

例:

<input type="text" id="name">
<select id="members" name="members">
           <option>lotos</option>
           <option>helo</option>
           <option>hei</option>
</select>

$(function() {
            $('#name').blur(function() {
            $(this).css('background','white')
            });
});



フォーカスが外れたら背景色が白色になります。


また、フォーカス以外にもフォームのメソッドで便利なものがあります。

セレクトボックスの値が変わったら

change

例:

<input type="text" id="name">
<select id="members" name="members">
           <option>lotos</option>
           <option>helo</option>
           <option>hei</option>
</select>

$(function() {
            $('#menmbers').change(function() {
            alert("hi");
            });
});



セレクトボックスの値を変えると、アラートが表示されます