サムネイルで画像を切り替えるjQuery

質問

下記サイトを参考にサムネイルで画像を切り替えるjQueryを作成しました。
http://tam-tam.co.jp/tipsnote/javascript/post3351.html

自動で切り替えしないようにスクリプトを一部修正して下記を設置しています。

chromeなどでは問題なくスムーズに切り替わるのですが、
firefoxでは、メイン画像とサムネイルが切り替わる際に
（フェードイン・フェードアウトの時）
背景が黒くなってしまいます。
また少し動作が不安定に感じます。
背景は白のままで、出来れば動作も改善させたいのですが、
原因が分からず困っています。

どなたか参考サイトのサンプルで原因が分かる方がおられましたら
ご教授いただけないでしょうか。

どうぞ宜しくお願い致します。

$(function (){
//設定
var active="active",interval=6000;
var index=0, timerId=null;
var tabs=$("#thumbBtn > li"), content=$("#view > p"), cap=$("#caption > li");

//クラスの付与
tabs.each(function(){$(this).removeClass(active);});
content.hide();
cap.hide();
tabs.eq(0).addClass(active);
content.eq(0).fadeIn("fast");
cap.eq(0).fadeIn("fast");

//クリックされたらactiveというクラスを付与、
//切り替え、タイマーをリセット
tabs.click(function(){
if($(this).hasClass("active")) return;
if(timerId) clearInterval(timerId),timerId=null;
change(tabs.index(this));
setTimer();
return false;
});

//タイマー
// setTimer();
// function setTimer(){
// timerId=setTimeout(timeProcess,interval);
// return false;
// }

function timeProcess(){
change((index+1)%tabs.length);
timerId=setTimeout(arguments.callee,interval);
}

//切り替え
function change(t_index){
tabs.eq(index).removeClass(active);
tabs.eq(t_index).addClass(active);
//fadeout
setTimeout(function(){
content.eq(index).stop(true, true).fadeOut(3000),
cap.eq(index).stop(true, true).hide()
;}, 300);
//fadein
setTimeout(function(){
index=t_index;
content.eq(index).fadeIn(3000),
cap.eq(index).fadeIn(3000)
;}, 400)
}
});

回答No.1

utun01 · ベストアンサー

CSSでの半透明の指定方法はブラウザによって違います。
この為、半透明の状態が存在する処理はどうしてもブラウザ毎に別処理を入れる必要がある場合があります。
普通にfadeIn、fadeOutを使うのではなく、ブラウザ毎に以下の値を弄って同等の動作を実現されてみては如何でしょうか。
filter: alpha(opacity=xxx);
-moz-opacity:xxx;
opacity:xxx;

jQueryは結構うまくやってくれた様な気がしますので、もしかしたら使ってらっしゃるjQueryを最新にするだけで解決するかも？

お礼

ご回答どうもありがとうございました！！　お教えもらったことを参考にして、なんとかうまく動かすことができました！