jQueryでよく使うセレクターの活用法

jQueryを使い始めた方等はなかなか0から作るのは難しいと思うので、よく使うもののなかでセレクターの活用法を書き出してみます。

例えば、タブのボタンを切り替えたいとき、押したところをON,その他をOFFにしたい処理をしたいときのセレクターの活用方法は・・・?

サンプル

ボタン01
ボタン02
ボタン03




ボタンを押した際にクラス「on」を付加、その他の並列したボタンのクラス「on」を取るスクリプトの簡単なサンプル。

<style>
<!–
.tab_blog{
display:block;
float:left;
padding:10px;
margin:0px 2px;
background-color:#EEE;
border:1px solid #333;
}
.tab_blog.on{
display:block;
float:left;
padding:10px;
margin:0px 2px;
background-color:#333;
color:#FFF;
}
–>
</style>

<div class=”tab_blog on”>
ボタン01
</div>
<div class=”tab_blog”>
ボタン02
</div>
<div class=”tab_blog”>
ボタン03
</div>
<script>
$(document).ready(function(){
$(“.tab_blog”).on(“click”,function(){
var a = $(this).parent();
$(“.tab_blog”,a).removeClass(“on”);
$(this).addClass(“on”);
});
});
</script>

 

.parent()を使い、押したボタンの要素の一つ上の要素を見て、そこからボタンと同じクラスを選び、「on」のクラスの出し分けを操作するスクリプト。

2014年の年賀状、年賀サイトのオーダー受け付けております。

NewImageNewImage
NewImageNewImage

年賀状や年賀サイトのデザインオーダーを受け付けております。

締め切りは2013年10月末日まで。

ハガキとサイトのコラボレートやiPadやiPhoneなどのスマートフォン、タブレット端末に対応したモーションを使った年賀サイト等、他と違う作品を制作することができます。

詳細はお問い合わせください。その際、予算なども必ずお伝えください。

スマホ(ブラウザ)でanimate()を使った際に出てしまう罫線などの残像対策メモ

スマホサイトでスライダーやカルーセル等を使うとき、可視領域外からオブジェクトがモーションで移動してきた際に罫線等の残像が残ってしまう場合があります。

高スペックなAndroidでは出ず、iPhoneなどでよく出る傾向がある印象なのですが、問題はブラウザのレンダリング時に本来消えるはずの線等の色が消えずに残ってしまうことが原因となります。

一番簡単な対処法は動かした後、残像が残る領域の背景を着色してしまう方法。

背景が白く、その状態で白を入れてもなおらない場合があるのでそういった場合は意図的に#FEFEFEなどといった分かりにくい色を入れてから#FFFFFFを入れる等、あまり違和感のない方法で簡単な記述でやると全体の処理も軽く済みます。