- Home
- JavaScript { Depository; }
- jQuery とか
jQuery とか
- 作成日 :
- 更新日 :
じゃ、邪魔ですか ?
要素の表示非表示切り替え
head level3 click here
paragraph paragraph
- Definition Term click here
- Definition Description
$(".trg").next().slideUp();
$(".trg").click(function(){
$(this).next().slideToggle('fast');//”slow”,”normal”,”fast” or "ミリ秒"
});
要素の表示非表示切り替え（アイコン付き）
head level3 click here
paragraph paragraph
- Definition Term click here
- Definition Description
$(".itrg > a").attr("href","javascript:void(0);");
$(".itrg").next().hide();
$(".itrg").click(function(){
$(this).next().slideToggle('fast',function(){
if($(this).prev().attr("class") == "itrg plus"){
$(this).prev().removeClass("plus");
$(this).prev().addClass("minus");
}else{
$(this).prev().removeClass("minus");
$(this).prev().addClass("plus");
}
});//”slow”,”normal”,”fast” or "ミリ秒"
});
画像フェード
$('#fade-nav>a:eq(4)').css('color','#ff0000');
var fadeFnc = setInterval(imgaFade,1800);
//マウスオーバーでフェード停止
$('#fade-image').mouseover(function(){
clearInterval(fadeFnc);
});
var segno = true;
var fadeflg = 0;
var speed = 3000;
var defaultColor = "#333333";
var currentColor = "#ff0000";
function imgaFade(){
if(fadeflg == 0){
$('#fade-nav>a').css('color',defaultColor);
$('#fade-nav>a:eq(3)').css('color',currentColor);
$('#fade-image>img:eq(4)').fadeOut(speed,function(){
fadeflg = 1;
});
}else if(fadeflg == 1){
$('#fade-nav>a').css('color',defaultColor);
$('#fade-nav>a:eq(2)').css('color',currentColor);
$('#fade-image>img:eq(3)').fadeOut(speed,function(){
fadeflg = 2;
});
}else if(fadeflg == 2){
$('#fade-nav>a').css('color',defaultColor);
$('#fade-nav>a:eq(1)').css('color',currentColor);
$('#fade-image>img:eq(2)').fadeOut(speed,function(){
fadeflg = 3;
});
}else if(fadeflg == 3){
$('#fade-nav>a').css('color',defaultColor);
$('#fade-nav>a:eq(0)').css('color',currentColor);
$('#fade-image>img:eq(1)').fadeOut(speed,function(){
fadeflg = 4;
});
}else if(fadeflg == 4){
fadeflg = 5;
}else if(fadeflg == 5){
$('#fade-nav>a').css('color',defaultColor);
$('#fade-nav>a:eq(4)').css('color',currentColor);
$('#fade-image>img').fadeIn(speed,function(){
if(segno == true){
fadeflg = 0;
}
});
}
}
テーブルセルの偶数行を色づけ
| head | head | head |
|---|---|---|
| data | data | data |
| data | data | data |
| data | data | data |
| data | data | data |
$('table > tbody > tr:odd').addClass('zebra');