< 記事共通の特徴 >

全デモのソース一式がダウンロード可能です。
ソース一式はローカル環境ですぐに使える構成になっています。

文字出現演出01
(スクリーンを下げるイメージ)


Javascript(jQuery)の落とし穴と解決策リスト01

ブラウザ画面(ウィンドウ)の高さが正しく取得できない

現象

$(window).height() で正しい値が取得できない。
※ Firefox 以外のブラウザでは正常に動作する事もあります。

原因

下記のようなコードを使用している。
<html>~</html>

対策

原因箇所を下記のように書き換える。
<!DOCTYPE html>~</html> 

余談

汎用的に使えるかは不明ですが、デモにおいては、 次のようなCSS設定の追加でも解決しました。
html, body {
  height: 100%;
}

1文字ずつの処理が動作しない

現象

下記のようなエラーが表示されて、Javascriptが動作しない。
jQuery.Deferred exception: $(...).children(...).andSelf is not a function

最新のjQueryで下記コードを実行すると発生します。
$('.tgt').children().andSelf().contents().each(function() {
    if (this.nodeType == 3) {
        $(this).replaceWith($(this).text().replace(/(/S)/g, '<span>$1</span>'));
    }
});

原因

andSelf() は非推奨のため、新しい jQuery (jquery-3.1.1.min.js 等)では、
別名の addBack() を使用する必要がある。
※ 参考ページ(https://api.jquery.com/andself/

対策

andSelf() の代わりに addBack() を使用する。

文字出現演出01
(スクリーンを下げるイメージ)