如何制作具有缩放所选图像和其他分散图像效果的图库

Question

到目前为止我的javascript代码：

$(document).ready(function(){
 $('.img1').mouseover(function(){
    /*  $('.img1').css({ "-webkit-transform ": "scale(2)",
                            "-moz-transform": "scale(2)",
                            "-o-transform": "scale(2)",
                            "transform": "scale(2)"
                        });   */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeOut(2500);
     $('.img1').mouseout(function(){
     /* $('.img1').css({"-webkit-transform ": "scale(1)",
                            "-moz-transform": "scale(1)",
                            "-o-transform": "scale(1)",
                            "transform": "scale(1)"});  */
        $('.img2,.img3,.img4,.img5,.img6,.img7,.img8,.img9,.img14,.img10,.img12,.img13,.img15,.img16,.img17').fadeIn(2500);
     });
});

这是我第一张图片的代码。

我想要实现的是，当我悬停一张图像时，所有其他图像应该分散。

Answer 1

我宁愿选择纯粹的CSS，也更直接。玩:hover选择器：

.container:hover > div
.container > div:hover

http://jsfiddle.net/GKSLk/（我只为webkit写过，但你可以添加更多的浏览器支持）

Answer 2

尝试元素的通用类 和每个元素的不同ID 在类中应用效果并应用悬停元素的效果ID