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/

View.OnClickListener

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/

jQuery fadeIn / fadeOut而不是fadeToggle

2 个答案: