我正在尝试使用这个 jQuery 函数来使我的图像缩放以及在悬停时出现滑动文本。我想使用总共 13 张图像,每张图像都有不同的尺寸。当我在 jQuery 函数中放置多个类时,所有类都继承第一个类的 css 属性,即使每个图像都有自己独特的 css 属性。如何设计我的函数,使每个类不继承第一个类的 css 代码?
<script>
$(document).ready(function() {
//move the image in pixel
var move = -15;
//zoom percentage, 1.2 =120%
var zoom = 1.2;
//On mouse over those thumbnail
$('.zitem, .take2').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.zitem, .take2').width() * zoom;
height = $('.zitem, .take2').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:1000});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.zitem, .take2').width(), 'height':$('.zitem, .take2').height(), 'top':'0', 'left':'0'}, {duration:500});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>