爲什麼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); 
});