Функция подсветки jQuery и функция наведения

Question

У меня есть 6 изображений в строке, первая из которых я хочу масштабирование и тень, тогда, если какое-либо из других изображений зависнет над ними, они увеличивают масштаб и применяют тень (через класс) и самое главное, я хочу, чтобы изображение оринала уменьшалось и удаляло тень, если другое изображение зависло.

У меня есть это до сих пор, хотя его, вероятно, написано полностью неправильно, вы скажете!

<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

Вместо манипулируя стилей, используя css метод, который я предложил бы использовать класс. Также, как упоминалось другими, у вас есть 3 функции обратного вызова для метода hover, который требует всего 2 функции. Попробуйте этот код, который исправил ваши проблемы, а также с помощью классов для масштабирования и отображения тени.

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 
}); 

Примечание: стиль, который вы используете -moz-transform будет работать только в Firefox, вы должны использовать другие эквивалентные стили для поддержки других браузеров.