Tag jQuery

TIPS:jQuery や JavaScript のアニメーション実行時のチラつきの対処方法(Safari,Chrome対応)

JavaScript(jQuery等)でスライドショー等の動きのある表現を行なったとき、アニメーションに連動して要素の一部分、もしくは画面全体かけて文字等がちらつく(フリッカー)現象が発生することがあります。 挙動自体に問題はなく発生範囲が限定的であっても、一度目にすると看過するわけにはいかないものです。 今回はこの問題を解決する方法をメモしておきたいと思います。 問題発生の原因によっては、今回紹介するパターンでは解決できない場合もありますが、是非一度お試しください。 jQuery や JavaScript のスライドショー実行時のチラつきの対処方法 中見出し まず、原因ですが、チラつきの現象がおこる対象はスタイルに position: relative が適用されている可能性が非常に高いです。 この場合であれば、以下の方法にてチラつきが解決できるかと思います。 いくつか解決パターンがあるので、上から順番に試していってみてください。 スライドショー等のアニメーションが実行されている要素のレイヤーを最前面にする 要素の position に relative が適用されている場合は z-index:1; (もしくは1以上の数値)を追加します。 スタイルシートに1行加える メインのスタイルシートの先頭に以下の1行を追加して下さい。{}は不必要です。 問題が発生する要素に position: relative を適用しない チラつきの対象に position: relative が意味もなく適用されている場合は、このスタイルを削除することで解決します。以下の例ではコメントアウトで対処しています。 まとめ この他にも、ネガティブマージンを指定している場合にも似たような問題が発生するときがあるみたいです。CSS の継承や擬似要素、擬似クラス等に関してもまだまだ勉強が必要ですね。 CSS に関してはまた別の機会に掘り下げてみようと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:即使用可能!JavaScript と jQuery のフォーム値取得テンプレート

form の値を取得するための JavaScript と jQuery のソースコードを一覧にし、コーディング時にそのまま使えるテンプレートとしてまとめました。 実際の動きがイメージしやすいように、実行サンプルと結果もセットにしました。ご活用下さい。 JavaScript と jQuery のフォーム値取得テンプレート サンプルコードの「取得」ボタンをクリックすれば結果が出力されます。 ボタン <input type=”button”/> HTML JavaScript jQuery サンプル 結果 テキスト <input type=”text”/> HTML JavaScript jQuery サンプル 結果 数値(HTML5) <input type=”number”> HTML JavaScript jQuery サンプル 結果 チェックボックス <input type=”checkbox”> HTML JavaScript サンプル A  B  C  結果 ラジオボタン <input type=”radio”> HTML JavaScript サンプル A  B  C  結果 セレクトボックス(単数選択) <select name=”select”> HTML JavaScript サンプル single A single B single C 結果 セレクトボックス(複数選択) <select name=”select” multiple> HTML JavaScript サンプル multiple A multiple B multiple C 結果 ※サンプルの結果は「出力」ボタンのクリックイベントで output($output) の値を出力したものとなります。 まとめ チェックボックスやラジオボタン、セレクトボックスの要素取得は、やはり jQuery が便利ですね。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:jQueryイージングの確認用アニメーションとサンプルコード一覧

おなじみeasingのカーブの名称と動きを忘れがちなので、アニメーションサンプルをjQuery日本語リファレンスを参考にみやすくまとめました。 サンプルコードを出力しているので、コピーペーストで即使用が可能です。コーディング時にお役立て下さい。 jQueryイージングのアニメーションサンプル カーブの名称 or バー をクリックすればアニメーションが確認できます。(最初の読み込みに多少時間がかかります) まとめ easeInElastic はどこで使用するのでしょうか(笑)一般的には easeInQuad、easeOutQuad、easeInOutQuad あたりがよく使われていると思います。 動きが楽しいからといってやりすぎにはには注意し、節度をもって使用すればUX向上に一役買ってくれると思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。

JavaScript:jQueryでmarginやpaddingの数値を取得

厳密に言えば、jQueryで取得したマージンやパディングの値は”px”がついている文字列なので、その文字列をJavaScriptでパースする。 var boxCls = “.box”; var boxMarginLeft = parseInt($(boxCls).css(‘margin-left’), 10); var boxPaddingLeft = parseInt($(boxCls).css(‘padding-left’), 10); こんな感じ。 ちなみにparseIntは文字列を整数に変換するJavaScriptの関数。 parseInt(str) parseInt(str,int) str = 対象とする文字列 int = 基数(2,8,10,16)進数 対象の文字列を変換できない場合や、先頭が文字、もしくは空であれば Nan が戻り値となる。 基数を指定しなければ、文字列の先頭が、0x、0Xなら16進数で、それ以外は10進数として処理される。 parseInt(“100”) -> 100 parseInt(“1234abc”) -> 1234 parseInt(“-999abc”) -> -99 parseInt(“abc1234”) -> -NaN parseInt(“”) -> -NaN parseInt(“0x12”) -> 18