javascript - jQuery fadeIn/fadeOut而不是fadeToggle

我正在尝试淡出图像，并淡入另一个display设置为none的图像。我可以使用fadeToggle做到这一点，但我想增加一个延迟时间，以避免在第一个图像消失之前显示第二个图像。

在这里找到了这个问题，给了我答案：
jQuery fadeToggle one after the other

这个答案使用了不同的类，但是我想对图像使用父元素的类来淡出第一个孩子，并淡入第二个孩子。然后，再次单击将其全部反转。

我的第一部分工作是淡出图像1，然后在延迟后淡入图像2。但是，当我再次单击时，图像2逐渐淡出并逐渐变回。

这是我的html：

<div class="item">
    <div class="target">
        <div class="visOn"><img src="http://placehold.it/300x300" alt=""></div>
        <div class="visOff"><img src="http://placehold.it/200x200" alt=""></div>
    </div>
</div>

这是CSS：

    .visOff{
    display:none;

这是JS：

    $('.target').click(function(){

        var icon1 = $(this).children();
        var icon2 = $(this).children().eq(1);

        if (icon1.is(':visible')){
            icon1.fadeOut('slow');
            icon2.delay(500).fadeIn('slow');
        }
        else if (icon2.is(':visible')){
            icon2.fadeOut('slow');
            icon1.delay(500).fadeIn('slow');
        }
    });

这是一个JSFiddle-https://jsfiddle.net/asantoni/ex30v3rh/

最佳答案

您需要使用简单的CSS来解决

https://jsfiddle.net/ex30v3rh/1/

.target {
    position: relative;
}
.target > div {
    position: absolute;
}