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

Question

当我swiperight（从红色到绿色）红色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> 

Answer 1

尝试调用淡入淡出功能，像这样：

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