Question

我发现可以这样做：

$(".topImage img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");                
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        });
    });

但是这会让它变坏，因为它完全淡化了之前的src。有没有一种方法可以转换src更改，以便没有“现在它是新的src加载之前的白色背景”？

修改

<div class="topImage">
    <img src="<?=$img[0]?>">
</div>

这是必须保留的 - 只有topImage容器中的一个图像，因此有两个图像可以改变不透明度，不是一种选择。

Answer 1

你甚至可以在没有JS的情况下做到这一点。有很多方法可以做到，但这里有一个：http://codepen.io/mbrillaud/pen/MwwgWZ

HTML

<div class="container">
  <img src="//lorempicsum.com/futurama/350/200/2" alt="" />
  <img src="//lorempicsum.com/futurama/350/200/1" alt="" />
</div>

CSS

.container {
  position: relative;
}

.container img {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s;
}
.container img:last-child:hover{
  opacity: 0;
}

Answer 2

有更好的方法可以解决这个问题。

看看这个fiddle

一张图片始终可见。第二张图片只是淡入或淡出。

这是实现效果所需的唯一jquery代码

  /* Set images to full screen */        
    $(".fader").mouseover(function() {
        $("#mask2").stop().fadeIn(800);
    });
    $(".fader").mouseout(function() {
        $("#mask2").stop().fadeOut(800);
    });

其余工作由css

完成

.fader {
    border: 5px solid blue;
    background-color: white;
    top: 0;
    right: 0;
    position: fixed;
}
.mask {
    position: absolute;
    z-index: -10;
    min-width: 100%;
    top: 0;
    left: 0;
    background-size: cover;
}
#mask1 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start.jpg");
}
#mask2 {
    background-image: url("http://test.coffeeshop.abcde.biz/cascara/img/bg_start2.jpg");
    display: none; /* Initial state */
}

如何淡化图像src属性？

2 个答案: