Question

我理解SO的规则，我必须首先在相似的问题中搜索答案，但在主题中没有一个得到我正在寻找的东西。我试图让一个有图像的div淡入，然后在它完成那个效果之后，另一个在它旁边消失。我非常确定必须使用jQuery回调，但我尝试过的所有东西似乎都没有用。

这是HTML：

<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="img/tuning.png" class="responsive">
    <a href="lu-sound.html">
        <h1 class="center left">SOUND</h1>
    </a>
</div>
<div class="w3-row">
<div class="w3-col s6 w3-center">
<img src="img/tuning.png" class="responsive2">
<a href="lu-suspension.html">
        <h1 class="center right">SUSPENSION</h1>
</a>
</div>
</div>

CSS很简单：两个类，.responsive和.responsive2都具有none的显示属性。

这是jQuery：

<script type="text/javascript">
    $(document).ready(function () { 
        $(".responsive").fadeIn(2500).removeClass("responsive", function() {
            $(".responsive2").fadeIn(5000).removeClass("responsive2");
        });
    });
</script>

Answer 1

您的想法似乎没问题，但再次检查您的代码，您有removeClass的回调，但它必须是fadeIn。

$(".responsive").fadeIn(2500, function() {
    //callback
}).removeClass("responsive");

Answer 2

大多数jquery动画函数都有两个参数：duration和[on] complete。您可以使用此第二个参数来继续＆＃39;下一个动画，即：

$(function() { 
    $(".responsive").fadeIn(2500, function() { 
        $(this).removeClass("responsive");
        $(".responsive2").fadeIn(5000, function() { 
            $(this).removeClass("responsive2");
        });
    });
});

淡入图像并在效果结束后，淡入其中的另一个

2 个答案: