jQUery：フェードアニメーションについて

質問

jQueryのスライドショーをサイトに配置しようと考え、下記URLのソースを
参考にしようとしています。皆様のお知恵をお貸しいただければ
幸いです。

http://jsdo.it/TFujinami/8EaB

こちらのソースで、フェードアニメーションで
メインイメージを変化させたいのですが、
どこを修正すればよいのでしょうか。

$(function(){
var slider_interval = 4000;
var slider_now = 0;
var slider_max = 0;
var slider_mouseover = false;
var slider_img_width = $("#slider").width();
var slider_href = new Array();

function sliderScroll(){
slider_now++;
if (slider_now > slider_max){ slider_now = 0; }
sliderAnimation(slider_now, 'slow');
}

function sliderAnimation(index, speed){
$('#slider .gallery .inner').animate({'margin-left':index * -1 * slider_img_width + 'px'}, speed, function(){
$('#slider .thumbnail div').removeClass('now');
$('#slider .thumbnail div:eq(' + index + ')').addClass('now');
$('#slider .frame a').attr('href', slider_href[index]);
});
}

var sliderLoop = function(){
if (! slider_mouseover){ sliderScroll(); }
slider_scroll_timer = setTimeout(sliderLoop, slider_interval);
}

$('#slider .thumbnail div').mouseover(function(ev){
slider_mouseover = true;
slider_now = $(this).attr('data-sliderid') - 0;
sliderAnimation(slider_now, 'fast');
});

$('#slider .thumbnail div').mouseout(function(ev){
slider_mouseover = false;
});

$('#slider .gallery .inner div').each(function(){
$(this).css('margin-left', slider_max * slider_img_width + 'px');
$(this).css({'position':'absolute', 'margin-top':'0px'});
slider_href.push( $(this).find('a').attr('href') );
slider_max++;
});

slider_max = 0;
$('#slider .thumbnail div').each(function(){
$(this).attr('data-sliderid', slider_max);

$(this).find('img').wrap( $('<a>').attr({'href':slider_href[slider_max], 'target':'flickr'}) );

slider_max++;
});
slider_max--;

$('#slider .frame img').wrap( $('<a>').attr('target', 'flickr') );

sliderAnimation(0, 'fast');
setTimeout(sliderLoop, slider_interval)
});

本来ならば作者様に質問する事がよいと思うのですが、
より多くの方からお知恵を拝借したいと考え、この場で質問
させていただきました。

何卒よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

似たような質問が…と思ったら、同じ方のようで。実際にはどちらを使おうとなさっているのでしょうか？

あっ、「参考にして」とあるので、自作なさるのかな…

ざっと見ただけですが、sliderAnimationが画像をスライドさせながら切り替えているところですので、ここをフェードで切り替えるようにすれば良さそう。
他の部分と他に関係があるかまでは確認していません。

スライドとフェードの場合では、それにみあったCSSも変わってくると思いますので、ご自分でなさりたいことのイメージがはっきりしているのなら、まず、HTMLの構成やCSSをそれにあわせておいてから、スクリプトを作成するほうが無駄なく簡潔なものにできるとおもいます。