Can you make a div fade-in and fade-out using angularJs ng-hide?

Question

Is there a way to get a div to fade in and out using AngularJs ng-hide? Currently I am getting the "menu" to show when I mouse over the header div. I also got the div to stay when moving from the header to the menu itself. I can't however seem to find a way to get it to fade in and out using Angular or CSS.

Heres a JSFiddle

html:

<div ng-app>
    <div ng-controller="showCrtl">
        <div class="top" ng-mouseover="menu()" ng-mouseout="menu()">Mouse over me</div>
        <div ng-hide="bottom" ng-mouseover="menu()" ng-mouseout="menu()" class="bottom"></div>
    </div>
</div>

JS:

function showCrtl($scope){
    $scope.bottom = true;

       $scope.menu = function() {
        if($scope.bottom) {
            $scope.bottom = false;
        }

        else {
            $scope.bottom = true;
        }
    };
}

Answer 1

I took Mikey 's solution and made some adjustments. See jsfiddle.

angular.module("myapp", ["ngAnimate"])

.controller("showCrtl", function ($scope, $timeout) {
$scope.bottom = true;
 var inside = {
     top: false,
     bottom: false
 };

$scope.enterMenu = function (element) {
    inside[element] = true; 

    if (inside.top === false || inside.bottom === false) {
        $scope.bottom = false;
    }
    printObjects('entering ' + element);
};
 $scope.exitMenu = function (element, e) {
    inside[element] = false; 
     $timeout(function() {
         if (inside.top === false && inside.bottom === false) {
             $scope.bottom = true;
         }
     }, 100);
     printObjects('exiting ' + element);
 };
 var printObjects = function (from) {
     console.log('from: ',from,'\nshouldHide: ', $scope.bottom, '\ninside top: ', inside.top, '\ninside bottom: ', inside.bottom);
 };

});

Basically, I made it keep track of whether the cursor is inside of each of the elements and then I put a .1 second timeout before deciding whether to toggle the display variable.