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

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 = show，False = hide）

根据您的评论，这应该会起作用：

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