jquery - 为什么 jquery 淡出在这里不起作用

Question

当我向右滑动（从红色到绿色）时，红色 div 的淡出完成然后淡入完成绿色。当我向左滑动（从绿色到红色）时，绿色 div 的淡出似乎没有发生，因为 div red 很快淡入了？

我该如何解决？

<script>

    $(document).ready(function () {

        var elementAlarm = document.getElementById('ContentAlarm');
        var elementMap = document.getElementById('ContentMap');

        var hammertime = Hammer(elementAlarm).on("swiperight", function (event) {
            $(elementAlarm).fadeOut(1000);
            $(elementMap).fadeIn(500);

        });

        var hammertime = Hammer(elementMap).on("swipeleft", function (event) {
            $(elementMap).fadeOut(1000);
            $(elementAlarm).fadeIn(500);
        });
    });


</script>
<div id="ContentAlarm" style="background-color: red; width: 50%; height: 100%;text-align:center;font-size:72px;">
    ALARM
</div>
<div id="ContentMap" style="background-color: green; width: 50%; height: 100%;text-align:center;font-size:72px;">
    MAP
</div>

Answer 1

尝试像这样调用淡入淡出函数：

$(elementMap).fadeOut(1000, function() {
    $(elementAlarm).fadeIn(500);
});