jQueryのハイライトとホバー機能

Question

私は6つのイメージを連続しています。最初のものはスケーリングとシャドウを使い、他のイメージの上にホールドすると、それらはスケールアップされ、シャドウ（クラスを通して）が適用されます。最も重要なことは、別の画像が上に乗っていれば、元画像を元に戻して影を消したいということです。

私はこれまでこれを持っていますが、おそらく書かれたcompletleyが間違っています！代わりに、私はクラスを使用することをお勧めcss方法を使用して操作するスタイルの

<script type="text/javascript"> 
(document).ready(function() { 
    $("#gallerySlideshow li img:first").css('-moz-transform', 'scale(1.1)').addClass('test'); 
    $("#gallerySlideshow li img").hover(function(){ 
     $(this).css('-moz-transform', 'scale(1.1)').addClass('test'); 
    }, 
function() { 
     $("#gallerySlideshow li img:first").css('-moz-transform', 'scale(0.9)').removeClass('test'); 
}, 
    function() { 
     $(this).css('-moz-transform', 'scale(0.9)').removeClass('test'); 
    }); 
}); 
</script> 

Answer 1

。また、他の人が触れたように、最大​​2つの関数しか必要としないhoverメソッドへの3つのコールバック関数があります。あなたの問題を修正したこのコードを試してください。クラスを使って拡大縮小し、影を表示してください。

のCss

img{ 
    //default style, add whatever style you want here 
    -moz-transform: scale(1.1); 
} 
.scaleAndShadow{ 
    -moz-transform: scale(1.1);//Apply on hover 
} 

JS

$(document).ready(function() { 
    $("#gallerySlideshow li img").hover(function(){ 
     $(this).addClass('scaleAndShadow') 
     .siblings().removeClass('scaleAndShadow'); 
    }, 
    function() { 
     $(this).removeClass('scaleAndShadow'); 
    }) 
    .first().addClass('scaleAndShadow');//Set the class to first img on load 
}); 

注：あなたが唯一のFirefoxに動作します-moz-transformを使用しているスタイルは、あなたが他のブラウザをサポートするために、他の同等のスタイルを使用する必要があります。