私は簡単なコーディングをしています: http://jsfiddle.net/8AMa4/20/ (単なる指示のための愚かな色;))
基本的には動作しますが、グリッチが発生したため、修正方法がわかりません。div には画像の「ページ」があり、ボタンを押すと横にスライドし、一度に 1 つしか表示されません。表示されている画像にカーソルを合わせると、フェードインが表示されます。問題は、このホバー時のフェードインが、div の非表示になるはずの部分にも表示されることです。(マウスを man div の右側に移動すると、jsfiddle の例で確認できます)。
誰でも解決策を教えてもらえますか? 2 つの「エフェクト」(ホバーとスライド) のどちらをどこで変更すればよいですか?
HTML:
<div class="tab-box">
<div class="tabs">
<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
</div>
<div class="items">
<div class="item" style="background: red;">
<a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg"/></a>
</div>
<div class="item" style="background: blue;">
<a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg"/></a>
</div>
<div class="item" style="background: green;">
<a href="#"><span class="rollover"></span><img class="thumbnail" alt="" src="http://www.sxc.hu/pic/m/s/sk/skapie/1218910_guitar.jpg" /></a>
</div>
</div>
</div>
jQuery:
$(document).ready(function() {
$('.tab-box').each(function() {
var left = 0;
var $tabbox = $(this);
var width = $tabbox.width();
$(this).find('.tab').each(function() {
var shift = left;
$(this).click(function() {
$tabbox.find('.items').animate({marginLeft: shift + 'px'});
$tabbox.find('.tab').removeClass('active');
$(this).addClass('active');
});
left -= width;
});
$(this).find('.tab:eq(0)').addClass('active');
});
});