Question

我无法让图片交换正常工作。问题是放在下面的标题消失在交换图像后面，因为它有位置：绝对。我可以通过对图像周围的额外div应用固定高度来解决问题 - 但由于这必须在响应式布局中工作，因此高度可以更改。

我确信有一个简单的解决方案，但无法弄明白。

创建了jsfiddle＆amp;粘贴代码如下：

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

任何帮助都非常感谢！

Answer 1

您不必fadeOut image_off元素，因为image_on正在淡出。

如果您想要保留此行为，可以将不透明度设置为接近透明，然后image_on在顶部渐渐消失。

Answer 2

删除position:absolute;。

在 JQuery 中添加callback function，以便.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/

Answer 3

如果它对任何人有用，最终的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);
});

jQuery图像交换 - 保持宽度和高度

3 个答案: