jquery - ここでjqueryのフェードアウトが機能しないのはなぜですか

Question

右にスワイプすると (赤から緑に)、赤の div のフェードアウトが行われます。次に、緑のフェードインが行われます。左にスワイプすると (緑から赤に)、赤の div がすぐにフェードインするため、緑の div のフェードアウトが行われないように見えますか?

どうすれば修正できますか？

<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>