1

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

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

在下面创建了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);
});

非常感谢任何帮助！

4

3 回答 3

2

您不必使用fadeOut该image_off元素，因为 image_on 在顶部逐渐消失。

如果您想保留这种行为，您可以将不透明度设置为近乎透明的动画，然后image_on无论如何都会在顶部淡入淡出。

于 2013-02-04T20:31:43.037 回答
1

删除position:absolute;.

callback function并在JQuery中添加 a ，以便 the.fadeIn()和 the.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-04T20:22:58.097 回答
0

万一它对任何人有任何用处，最终的 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-04T21:48:38.317 回答