Почему jquery fadeout не работает здесь

Question

Когда я swiperight (от красного до зеленого), исчезает размытие красного div. Затем fadein делается из зеленого. Когда я swipeleft (от зеленого до красного), исчезновение зеленого 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); 
});