javascriptにフェードインを追加したい。

質問

下記のjavascriptに、フェードイン効果を追加するにはどうすればいいでしょうか？

現在は、クリックで、テキストが切り替わる仕様になっているんですが、これにフェードイン、フェードアウトの機能を付け加えたいです。

また、切り替わった際に下記のようにCSSの.actveをclass=""に追加させたいのですが、
どうすれば可能でしょうか？
目的は、アクティブになったボタンの背景を変更したい為です。

<div class="button actve"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン１</a></div>

【javascript】
function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,"");
if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide';
}
}
return false;
}

function checkd1(){
document.FORM.CHECK1.checked=true
document.FORM.CHECK2.checked=false
document.FORM.CHECK3.checked=false
}
function checkd2(){
document.FORM.CHECK1.checked=false
document.FORM.CHECK2.checked=true
document.FORM.CHECK3.checked=false
}
function checkd3(){
document.FORM.CHECK1.checked=false
document.FORM.CHECK2.checked=false
document.FORM.CHECK3.checked=true
}

function change(c) {
var f = c.checked, btn = c.form.elements['btn1'];
btn.disabled = f?false:true;
f = f?'sozai/button_2.jpg':'sozai/button_1.jpg';
btn.style.backgroundImage = 'url(' + f + ')';
}

【HTML】
<div class="button"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン１</a></div>
<div class="button"><a href="#" onclick="checkd2();return ChDsp2('text2','textALL');">ボタン２</a></div>
<div class="button"><a href="#" onclick="checkd3();return ChDsp2('text3','textALL');">ボタン３</a></div>

<div class="clear">&nbsp;</div>

<div class="area">
<form name="FORM">
<div id="text1" class="textALL">
その１、ここは最初に表示されています。
</div>

<div id="text2" class="textALL hide">
その２、ここはボタン２をクリックで表示されます。
</div>

<div id="text3" class="textALL hide">
その２、ここはボタン３をクリックで表示されます。
</div>
</form>
</div>

上記は、以前頂いたプログラムをわかる範囲で改造したものなのですが、
限界を感じまして、どなたか教えて頂けたら助かります。

宜しくお願いします。

回答No.2

fujillin · ベストアンサー

#1です。

なんだかよくわからないので、参考にもならないかも知れませんが…
（勝手に仮定しています。）

◇ HTML（テスト用）
<div id="group1">
<a href="#text1" class="actve">１を表示</a>
<a href="#text2">２を表示</a>
<a href="#text3">３を表示</a>
</div>
<hr>
<div id="group2">
<a href="#text4">４を表示</a>
<a href="#text5">５を表示</a>
<a href="#text6">６を表示</a>
</div>
<hr>

<div id="text1">１１１１１１</div>
<div id="text2">２２２２２２</div>
<div id="text3">３３３３３３</div>
<div id="text4">４４４４４４</div>
<div id="text5">５５５５５５</div>
<div id="text6">６６６６６６</div>

◇ javascript（jQueryを使用しています）
//違うところは適当に修正してみてください。
（全角空白は半角に）

(function($){
var speed = 1000,
　　active = "actve",
　　n_active = ":not(." + active + ")",
　　getTarget = function(elm){
　　　var h, r = $("");
　　　elm.each(function(){
　　　　if(h=$(this).attr("href").match(/#.+$/)) r = r.add(h[0]);
　　　});
　　　return r;
　　};

$.fn.extend({
　changer : function(){
　　var t = $(this).children("a");
　　getTarget(t.filter(n_active)).hide();
　　t.click(function(){
　　　var elm, func, t = $(this);
　　　getTarget(t.parent().children("a")).queue([]).stop(1,1);
　　　func = function(){
　　　　getTarget(t.addClass(active)).fadeIn(speed);
　　　};
　　　elm = getTarget(t.siblings("."+active).removeClass(active));
　　　if(elm.length) elm.fadeOut(speed, func); else func();
　　　return false;
　　});
　}
});
})(jQuery);

// **************************************

//設定（テスト用）
$(function(){
　$("#group1").changer();
　$("#group2").changer();
});

お礼

ありがとうございます。
上記を元にカスタマイズでうまく表現できました。

本当に助かりました。

回答No.1

fujillin

ご提示の内容だとわからないところが多すぎて…

・なぜ表示対象がform要素の中にあるのか
・checkdとの関係はどうなっているのか
・textALLってわざわざ指定してるみたいだけれど、ドキュメントのあちこちに散らばって
　いるもの全部が対象なのか、id指定されているものだけが対象なのか
などなど…

何がどうなっているのかわからないので、具体的には書きようがありませんが、jqueryなどのライブラリを利用してしまえばフェード効果なども比較的簡単に実現できます。

例えば
　フェードイン：　　$(要素のセレクタ).fadeIn();
　フェードアウト：　$(要素のセレクタ).fadeOut();
程度の記述で実現可能です。
　http://api.jquery.com/fadeIn/
　http://api.jquery.com/fadeOut/

また、クラスの設定・削除に関しても
.addClass(class)、 .removeClass(class)
で可能です。

お礼

度々すみません。
上記も間違っておりました。

こちらになります。

<style>
.hide{display:none;}
</style>

<script>
function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,"");
if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide';
}
}
return false;
}
</script>

<a href="#" onclick="return ChDsp2('text1','textALL');">1を表示</a>
<a href="#" onclick="return ChDsp2('text2','textALL');">2を表示</a>
<a href="#" onclick="return ChDsp2('text3','textALL');">3を表示</a>

<div id="text1" class="textALL">111111</div>
<div id="text2" class="textALL hide">222222</div>
<div id="text3" class="textALL hide">333333</div>

補足

すいません。
これは、チェックボックスを使うためにカスタマイズした媒体でした。
下記が今回使おうとしているものです。

function ChDsp2(strShow,classHidden){
var tags=document.getElementsByTagName("div");
for(var i=0;i<tags.length;i++){
if(tags[i].className.match('textALL')){
tags[i].className=tags[i].className.replace(/hide/,"").replace(/^\s+|\s+$/,"");
if(tags[i]!=document.getElementById(strShow)) tags[i].className+=' hide';
}
}
return false;
}

<div class="button"><a href="#" onclick="checkd1();return ChDsp2('text1','textALL');">ボタン</a></div>
<div class="button"><a href="#" onclick="checkd2();return ChDsp2('text2','textALL');">ボタン2</a></div>
<div class="button"><a href="#" onclick="checkd3();return ChDsp2('text3','textALL');">ボタン3</a></div>

<div class="clear">&nbsp;</div>

<div class="area">
<div id="text1" class="textALL">ボタン</div>
<div id="text2" class="textALL hide">ボタン2で表示</div>
<div id="text3" class="textALL hide">ボタン3で表示</div>
</div>

になります。

textALLがついている箇所にhideが入るか取り外す仕組みになっているようです。
なので、他の場所に設置してしまうと非表示になってしまう為、
ここでしか使わないクラス名に変更しました。