如何在圖像庫中平滑過渡以縮放圖像？

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

});​