如何在图像库中平滑过渡以缩放图像？

Question

我想创建一个图像库，其缩放效果类似于this one。当鼠标悬停在图像上时，它将显示带有一些额外标记的图像的较大版本。

的标记：

<div class="gallery"> 
    <div class="gallery-item"> 
     <img src="image.png" width="150" alt="" /> 
     <div class="gallery-item-full"> 
      <img src="image.png" width="250" alt="" /> 
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p> 
     </div> 
    </div> 
    . 
    . 
    . 
</div> 

的CSS：

.gallery { 
    margin: 100px auto; 
    width: 600px; 
} 

.gallery-item { 
    float: left; 
    position: relative; 
    margin: 0 25px; 
    width: 150px; 
} 

.gallery-item-full { 
    z-index: 999; 
    position: absolute; 
    background: #fff; 
    border: #ccc 1px solid; 
    padding: 5px; 
    top: -50px; 
    left: -50px; 
    opacity: 0; 
} 

.gallery-item:hover .gallery-item-full { 
    opacity: 1; 
} 

这工作，但我要像在previous gallery的平稳过渡。我打开使用Javascript/jQuery。

谢谢。

Answer 1

试试这个：http://jsfiddle.net/FPKAP/12/（有点不同，但我对最近有人制造）

希望它适合你的需要:)

链接：Enlarging images when mouseover using Jquery?

代码

$('#zoomimg').mouseenter(function() { 
    $(this).css("cursor","pointer"); 
    $(this).animate({width: "50%", height: "50%"}, 'slow'); 
}); 

$('#zoomimg').mouseleave(function() { 
    $(this).animate({width: "28%"}, 'slow'); 
}); 

代码

$('#zoomimg').hover(function() { 
    $(this).css("cursor", "pointer").animate({ 
     width: "50%", 
     height: "50%" 
    }, 'slow'); 

}, function() { 
    $(this).animate({ 
     width: "28%" 
    }, 'slow'); 

});​