如何淡化图像并将其替换为另一个图像？

Question

我的图片库有问题。由于某种原因，图像淡出但其余代码没有执行，它只是在中途停止。我已经尝试删除淡出功能并且代码工作正常，图像被交换它们应该如何等等。我做错了什么关于淡入淡出？

 $('.frame').click(function() {
    $("#lightbox").toggleClass("fadeout", function (){
    var copy = $(this).children().clone();
    $('#lightbox').children().replaceWith(copy);
    $("#lightbox").toggleClass("fadeout");
    });
});

我是一个完全自学成才的新手，所以我可能会问一些愚蠢的问题。

    #lightbox {
    opacity: 1;
    padding: 0 0 0 1%;
    width: 89%;
    height: 100%;
    float: right;
    text-align: center;
    transition: opacity 1s ease;
}

#lightbox.fadeout {
    opacity: 0;
}

.frame {
    width: 100%;
    text-align: left;
}

<div id="gallery_container">
<div id="lightbox">
    <img src="images/IMG_6412.jpg" alt="">
    </div>
<div id="gallery_nav">
    <ul>
        <div class="frame"><img src="images/XA2.jpg" alt=""></div>
        <div class="frame"><img src="images/Mega002.jpg" alt=""></div>
        <div class="frame"><img src="images/IMG_6412.jpg" alt=""</div>
    </ul>
</div>
    </div>

Answer 1

您没有正确使用 toggleClass 函数。第二个参数是一个函数，但根据文档，第二个参数必须是一个 state 指示，它是一个布尔值（True = 显示，False = 隐藏）

根据您的评论，以下内容应该有效：

$('.frame').click(function() {
    var copy = $(this).children().clone();
    $("#lightbox").fadeOut(2000, function (){
      $('#lightbox').children().replaceWith(copy);
      $("#lightbox").fadeIn(2000);
    });
});

如何淡化图像并将其替换为另一个图像？

How can I fade an image and replace it with another one?

jquery

image

callback

fade

gallery