jQuery img swap - 保持寬度和高度

我無法使圖像交換正常工作。問題在於，放置在下面的標題消失在交換後的圖像後面，因爲它具有絕對位置。我可以通過將固定高度應用於圖像周圍的額外div來解決問題 - 但由於這必須在響應式佈局中工作，因此高度是可變的。jQuery img swap - 保持寬度和高度

我確定有一個簡單的解決方案，但無法弄清楚。

已創建以下jsfiddle &粘貼代碼：

HTML：

<div class="container"> 
<img src="http://placehold.it/100x100" class="image_off"> 
<img src="http://placehold.it/100x100/E8117F" class="image_on"> 
<h2>Title</h2> 
</div>

的jQuery：

//image fade on hover 
$('.image_off').on('mouseenter', function() { 
    $(this).fadeOut(200); 
    $('.image_on').fadeIn(200).css('display', 'block'); 
}); 
$('.image_on').on('mouseleave', function() { 
    $(this).fadeOut(200); 
    $('.image_off').fadeIn(200); 
});

任何幫助，不勝感激！

來源

2013-02-04 vonholmes

您不必fadeOut的image_off元素，作爲image_on正在消失在頂部。

如果您希望保留此行爲，則可以將不透明度設置爲接近透明，然後image_on會在頂部淡入淡出。

來源

2013-02-04 20:31:43 kms

謝謝！這最適合在圖像之間保持適當的淡入淡出效果。 – vonholmes

刪除position:absolute;。

，並添加callback function在JQuery的，使.fadeIn()和.fadeOut()執行一前一後。

$('.image_off').on('mouseenter', function() { 
    $(this).fadeOut(200,function(){ 
      $('.image_on').fadeIn(200).css('display', 'block'); 
    }); 

}); 
$('.image_on').on('mouseleave', function() { 
    $(this).fadeOut(200,function(){ 
      $('.image_off').fadeIn(200); 
    }); 

});

檢查出來：http://jsfiddle.net/AliBassam/GTK8T/

來源

2013-02-04 20:22:58

大，這也適用。謝謝。 – vonholmes

在情況下，它是任何使用人的，最後jQuery的使用：

//image fade on hover 
$('.image_off').on('mouseenter', function() { 
     $(this).animate({opacity: 0.5}, 200); 
     $('.image_on').fadeIn(200).css('display','block'); 
}); 
$('.image_on').on('mouseleave', function() { 
     $(this).fadeOut(200); 
     $('.image_off').animate({opacity: 1}, 200); 
});

來源

2013-02-04 21:48:38 vonholmes

jQuery img swap - 保持寬度和高度

回答

相關問題