森のコーディング森のコーディング2013年04月マークアップエンジニアとかWEBディレクターとかをやってる僕が、自分が詰まって、解決したことをここに残しておきますよ。>4月23画像が順番にフェードインしてくるのをjQueryでつくる。カテゴリ:jQueryjavascriptページを開いたときに、画像が順番にフェードインしてきたらカッコイイ。これをjQueryでつくる方法です。htmlは以下のようにします。alt="neko"></li></ul></div>css側では、あらかじめ<li>を透明にしときます。li{opacity:0;}js側は以下のようにします。li").each(function(i){$(this).delay(i*50).fadeIn();});});jQueryで、上記のように並んでいる要素1つ1つを処理したい場合、each()を使います。jQueryのeachの使い方リファレンス↓こんな感じですね。下にあるliの要素数分、命令hogehogeを繰り返す、というものです。今回のサンプルでいうと、<li>が6個あるので6回繰り返します。順番に処理してくれるのだから、そのままアニメーションを実行したくなります。li').each(function(){$(this).fadeIn();})僕もずこれをやっちゃいました。「eachで1つずつ処理した意味ないだろ!」と叫ぶことになりますね。1つ1つの処理が終わるまで待たずに次の処理をじゃんじゃん始めちゃうからです。フェードインが開始する時間を少しずつずらさないといけない。そこで登場するのがdelay()さん。1000ms(つまり1秒)たってからスタートしますよ、というやつ。li').each(function(){$(this).delay(1000).fadeIn();})こうすると、1秒ずつ遅れてスタートしてくれるかと思いきや、そうなりません。1秒たってから、全部がいっせいにスタート。これだとさっきのやつと同じで、全部の処理を一気にスタートしてしまいます。li').each(function(i){$(this).delay(i*1000).fadeIn();})わかりづらいですが、赤の部分が変わりました。繰り返している回数の数が入ります。以下のように動きます。5秒後にスタートこうして、1秒ずつずらすということができました。実際1秒だと遅すぎるので、50msくらいが気持ちいいと思います、これで完成ですが、これだけだとエラーを起こしちゃいます。imgを集めてこれないよ」と混乱しちゃうためです。画像が読み終わってから処理を開始する必要があります。{hogehoge;});サーバーにリクエストしたデータのロードが完了してからhogehoge(処理)を開始するよっていう命令です。これでいちばん外側を囲めばOKです。li").each(function(i){$(this).delay(i*50).fadeIn();});});50の部分を100にしたり500にしたりすると、出てくるスピードを変えられますよ。fadeIn()の部分を他のアニメーションにしたりして、違う見せ方もできますよ。気にならないのに、androidで見ると、いちいちタップするたびにオレンジの枠が出て、うっとおしいですよね。あれはcssでサクリと消せます。*{-webkit-tap-highlight-color:rgba(0,0,0,0);}cssファイルにこれを一行いれるだけです。僕はiphoneユーザーということもあって、androidのオレンジの枠が気になるので入れておきたい派。2013年04月19日11:51tacshockコメント:0トラックバック:04月19iPhoneサイトでチェックボックスやラジオボタンを大きくしたいカテゴリ:cssiphone/ipadサイトinputのチェックボックスやラジオボタンって、サイズが変更できないですよね。テキストボックスとかと違って。画像で代替えしちゃう、みたいなことはやってたんですが、もっとシンプルにcssででかくするというのがあったようなのでメモ。css3のtransformを使います。scale(1.3);margin-right:0.5em;}transform:scaleをつかって、拡大するっていう技です。ここでは1.3倍にしてる。拡大すると、チェックボックスとその次に続くテキストとの幅が縮まっちゃったりするのでmargin-rightも追加してます。scale(1.3);margin-right:0.5em;}簡単だね。2013年04月19日11:47tacshockコメント:0トラックバック:04月19androidでbox-sizingがうまくいかないバグカテゴリ:androidcssスマホではとっても楽になるcss3のbox-sizingプロパティ。box-sizing:border-boxとすると、paddingとborderをwidthやheightの中に含めてくれます。心置きなくwidth:100%;padding:10px;とかできます。androidだと、box-sizingがそのままではうまくいかない。困ったらとりあえずベンダープレフィックスをつけてみるというのもひとつですね。「FTPESで接続してください」って言われたとき。ん?SFTPじゃなくて?そんな設定Filezillaにあったかな?と思ったらあった。Explicitモード」のことだそうで。TLSが必要を選ぶと、FTPESになりますよっと。長い英単語をいれるとtableの中をつきぬけちゃうイラレでスライスを速くするスクリプト。bluetoothヘッドセット1時間1円で暖かい。夏のPC仕事のおともに冷えピタ。クールヘッドで脳のスピードがあがります。お仕事のご依頼・お問い合わせはこちらコーディングのお仕事が得意です。