jQuery fadeIn / fadeOut而不是fadeToggle

Question

我试图淡出一个图像，然后淡出另一个设置为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/

Answer 1

您需要用一个简单的CSS来解决问题。

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

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

Answer 2

你也可以尝试另一种方法，

我已经更新了JSFiddle，这不需要切换，但是可以使用类，好处是这还可以让您更好地控制元素的行为。

var switchFade = function(){
    e_on = $('.visOn');
    e_off = $('.visOff');

    $(e_on).animate({'opacity':0},'slow',function(){
        $(e_on).removeClass('visOn').addClass('visOff');
        $(e_off).addClass('visOn').removeClass('visOff');
        $(e_off).css({'opacity':0});
        $(e_off).animate({'opacity':1},'slow');
    });
};  


$('.target').click(function(){
    switchFade();
});

https://jsfiddle.net/ex30v3rh/5/