jQuery 悬停时从新 URL 淡入新图像而不变白 "Blink"

Question

我在 Squarespace 中工作，所以我的一些选择受到限制（我无法添加单独的图像 div 并将其用作替代品，或者我不确定如何添加）。我试图在悬停时慢慢淡入新图像，但 WITHOUT 完全淡出 -> 淡入效果导致两者之间出现白色“闪烁”。 Whosebug 上的其他解决方案似乎都包含完整的 Fade Out/Fade In 但没有用。

HTML:

<div id='#block-2091ad01016e0c16fbf5'>
    <img class="thumb-image" 
src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg">
</div>

JS:

<script>
(function($) {
  $(document).ready(function() {
    $('#block-76b0ced63f31cd9e2342').mouseover(function() {
        $( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg");
    });
    $('#block-76b0ced63f31cd9e2342').mouseout(function() {
        $( "#block-76b0ced63f31cd9e2342 .thumb-image" ).attr("src","https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5e0a26c2afc7590ba0a3b443/1603914016365/Jason-5941.jpg");
    })
  })
})(jQuery);
</script>

Answer 1

我认为你最好从 JS 创建第二个并从 css 获得这种交叉淡入淡出效果。参见 fiddle 例如： https://jsfiddle.net/x0ye6r5L/

$(function() {
var jsonArt = '<img id="bottom-art-jason" src="https://static1.squarespace.com/static/5cae826d21d24e00012dc02b/t/5fc2881b9ee0f32b87a52a14/1606584347864/Jason_Art.jpg" class="thumb-image" />';

$('#myDiv').prepend(jsonArt);
});

jQuery 悬停时从新 URL 淡入新图像而不变白 "Blink"

jQuery Fade In a New Image from a New URL on Hover without Getting White "Blink"

javascript

jquery

squarespace