「jQuery」カテゴリーアーカイブ

jQueryゼロから / scroll (指定位置にオートスクロールさせる)

jQueryではstyle属性をanimateでいじれます。
フェードイン・フェードアウトさせたいならopacity属性を0〜1でアニメーションとか。
ここでは、よくあるスクロールを指定します。

1
2
3
var target = $('html, body');
target.animate({ scrollTop: ***, 'slow' });
// *** にスクロールする座標を指定します

追記: 2011/01/31
if (jQuery.support.checkOn) {
  var target = $(‘html’);
} else {
  var target = $(‘body’);
}
という書き方を
var target = $(‘html, body’)
に変更しました。

指定のタグの位置に移動するなどの場合は動的に座標取得したりします。

1
target.animate({ scrollTop: $('#id').offset().top }, 'slow');

サンプル
追記: 2010/11/21 Safari, Chromeでも動作するように $(‘html’) と $(‘body’) の判定入れました
追記: 2011/01/01/31 判定入れなくても$(‘html, body’)って書き方でいけるみたい

JavaScriptで画像をプリロード

2012.01.09追記
読み込み後にエフェクト入れたものはこちら

JavaScriptで動的にタグを書きだしたりすると、その部分の画像が表示されてから読み込まれるのであらかじめ読み込んでおこうというよくある話。
とりあえず画像を配列とかに指定、パスは /images 配下に固定で。
(function(){…})() に記述するのは、他のJavaScriptとか読み込む時に変数名とか重複しないよう念の為。

1
2
3
4
5
6
7
8
9
10
11
(function(){
    var preloadImages = [
        'ooo.jpg',
        'xxx.jpg',
        '***.jpg'
    ];

    for (var i = 0; i < preloadImages.length; i++) {
        (new Image()).src = '/images/' + preloadImages[i];
    }
})();

HTML読み込み時じゃなくて、onload後とかが良ければ下記みたいな感じ。
※jQuery使います

1
2
3
4
5
6
7
8
(function($){
    var preloadImages = [...];
    $(function(){
        for (var i = 0; i < preloadImages.length; i++) {
            (new Image()).src = preloadImages[i];
        }
    });
})(jQuery);

jQueryゼロから / fadeTo (指定要素をフェードイン)

Lightboxとかの背景部分のアニメーションみたいな事が出来る fadeTo。
slideUp, slideDown と同様スピードに加え、透明度(opacity)を指定します。

1
2
3
4
<div id="targer" style="opacity: 0.0">
// 何か表示するもの
</div>
$('#target').fadeTo('slow', 0.8);

対象を最初隠しておくならopacity属性を0.0に設定しときます。

サンプル

2011.01.28 追記
fadeIn, fadeOut, fadeToggle(jQuery1.4.4以降)など似たような機能がありますが、opacity属性以外にdisplay属性も変わるので注意が必要です。ときどき忘れちゃいます…

jQueryゼロから / slideUp, slideDown (クリックで開いたり閉じたり)

ちょっとアニメーションぽい事を。
使いすぎるとウザイ、SlideUpとSlideDown。

1
2
<span id="slide">ここをクリック</span>
<p id="target" style="display: none;">なんか表示</p>

マウスクリックで閉じたり開いたりします。
jQuery ではアニメーションの速度を “slow”, “normal”, “fast” で指定できます。

1
2
3
4
5
6
7
$('#slide').click(function(){
    if ($('#target').css('display') == 'none') {
        $('#target').slideDown('slow');
    } else {
        $('#target').slideUp('fast');
    }
});

$(‘#target’).css(‘display’) でスタイルシートの display の状態を取得して、それにより処理を if 〜 else 文で分岐しています。

サンプル

2011.07.10 追記
単に開いたり閉じたりするなら slideToggle 使うと楽です。
jQueryゼロから / toggleSlide

jQueryゼロから / show, hide (マウスオーバーで表示・非表示を切り替える)

エフェクトの基本、show(), hide() やってみる。
マウスオーバー、マウスアウトで表示を切り替えてみます。

1
2
3
4
<span id="target">
    <span id="on" style="display: none;">マウスオーバー</span>
    <span id="off">マウスアウト</span>
</span>

こんな感じでマウスオーバー時のデータを非表示にしておいて、下記のようにして切り替えます。

1
2
3
4
5
6
7
$('#target').mouseover(function(){
    $('#off').hide();
    $('#on').show();
}).mouseout(function(){
    $('#on').hide();
    $('#off').show();
});

jQuery は $(‘#target’).mouseover().mouseout(); の様にドットで処理を連続して書けるのが便利です。

サンプル

2011.01.28 追記
mouseover / mouseout より hover (mouseenter / mouseleave) の方が余計なイベントが発生しないのでおすすめです。
hover については上記サンプルと下記に補足しました。
jQueryゼロから / hover (オンマウスでアニメーション)

jQueryゼロから / toggle (クリックで表示・非表示を切り替える)

最近使うこと増えたので知識の上書きアップデートも兼ねてゼロからやり直してみる。
まずはGoogleCDN使って読み込むところから。

1
2
3
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
google.load("jquery", "1.4.2");
google.load("jqueryui", "1.8.4");

└まとめていろいろ読み込む場合

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

└個別に読み込む場合

簡単にできるトグルから試してみる。

1
2
3
4
<div id="toggle">
<span></span>
<span style="display: none;"></span>
</div>

こんな感じで二つの同一要素を片方だけ display: none にしておいて、クリックで入れ替えるなら下記のようにします。

1
2
3
4
5
<script type="text/javascript">
$('#toggle').click(function(){
$(this).find('span').toggle();
});
</script>

<span> のところを <img> とかで使うことが多いかな。

サンプル

jQuery.cross-slide で画像にアニメーション効果をつける

画像のスライドショーというか、Flash使わずにちょっとカッコよくとか、そんなの。
http://tobia.github.com/CrossSlide/

指定はちょいわかりにくいけど、定番セット作っておけば毎回指定するとかもないような気がする。
そして、jQueryがかなり新しめじゃないと(確認したのは1.4.2)動作しないみたいで最初ハマった。
GoogleのCDN使うとjQuery 1.3.1が最新かと思いきや、1.4.2指定したら出来た。

そんなこんなで下記のような感じで指定。

1
2
3
4
5
6
7
8
9
<div id="slide" style="height: 150px; width: 300px;">Loading...</div>
<script type="text/javascript">// <![CDATA[
    jQuery('#slide').crossSlide(
        { fade: 2 }, [
        { src: 'images/a.jpg', from: '100% 80% 1x', to: '100% 0% 1.7x', time: 2 },
        { src: 'images/b.jpg', from: 'top left', to: 'bottom right 1.8x', time: 2},
        { src: 'images/c.jpg', from: '100% 80% 2x', to: '80% 0% 1x', time: 2}
    ]);
// ]]></script>

<div>とかであらかじめ縦・横サイズは決めてあげる。
そしたら、画像サイズもそれ以上のサイズで用意。

fromとかtoで画像の表示部分をCSSのルールに従って位置を決めつつ、1xとか1.5xで拡大率を指定、timeはアニメーションする時間、fadeはクロスフェードの時間です。
単なる画像のクロスフェードよりは、少し表現が豊かになった気がします。

ちなみにiPhoneでも動作確認しました。
まあ、1ページに1つとかにしないと重いです。

追記 2011.04.06
ここまで派手ではないですが、単なるフェードイン・フェードアウトのスライドショーのサンプルを作ってみました。参考までにドウゾ。
jQueryゼロから / スライドショー

jQuery.disableDoubleSubmit / ボタンクリックで多重投稿を防ぐ

jQueryでボタンをクリックすると無効にして、多重投稿を防ぐ。
[JavaScript] jQueryでフォームの2重送信を防ぐ – ありんく tech-log

個別に設定できるようになっています。これを一気に画面全部のボタンに適用してみる。

1
2
3
4
5
6
7
8
9
10
jQuery(funtion(){
var rf_timeout = 1000;
jQuery(':submit,:image,:button').click(function(){
var rf_submit = this;
rf_submit.disabled = true;
setTimeout(function(){
rf_submit.disabled = false;
}, rf_timeout);
});
});

フォーム送信後にボタン情報を必要とする場合は、disabledでデータが送信されなくなるので注意。
これについては下記参照。
Théoden’s Coding Tips » Blog Archive » jQuery: disable the submit button, but still send the button’s value

disableじゃなくてdisplay:noneにするか、クリック時にhiddenを入れるか。
一括でやると弊害もあるな。
<button>と<input>で役割変えたりとかでも回避はできそうだが、トリッキーかな…

Error: Suspended

追記:2010/07/01
問題あったので、いくつか修正。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(funtion(){
var rf_timeout = 1000;
jQuery('form').submit(function(){
jQuery(':submit,:image', this).attr('disabled', 'disabled');
});
jQuery(':submit,:image').click(function(){
var rf_hidden = '<input type="hidden" name="'
+ this.name
+ '" value="'
+ this.value
+ '" />';
jQuery(this).append(rf_hidden);
});
jQuery(':button').click(function(){
var rf_submit = this;
rf_submit.disabled = true;
setTimeout(function(){
rf_submit.disabled = false;
}, rf_timeout);
});
});

Chromeでdisableにするとsubmitイベントが発生しない(フォームが送信されない)ので、:submit, :image は別途処理を用意、clickからsubmitイベントに変更。
Form送信なら画面遷移するはずなのでタイマー復帰も廃止。

Form送信後のPHPなどでボタンのデータを使用する場合もあるので、別途clickイベント後にhiddenでデータを埋め込むよう変更。
※confirmで確認してる場合「いいえ」時にhiddenを消し忘れないよう注意

:buttonについては特に変更なし。
結局もっとトリッキーになった気がする…