Untitled

<!DOCTYPE html>
<html>
    
  <head>
    <script data-require="angular.js@1.2.28" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="myApp" ng-controller="myController">
      <div class="mousemove" ng-mousemove="myToggle()" ng-model="loading"></div>
      <div class="show" ng-show="loading"></div>
    </div>
  </body>

</html>

// Code goes here

var myApp = angular.module('myApp',[]);

myApp.controller('myController', function($scope, $timeout) {

	$scope.myToggle = function() {
	  
	  if($scope.loading){
	    $timeout.cancel($scope.loading);
	  }

		$scope.loading = $timeout(
			function() {
				$scope.loading = false;
			}, 3000);
	}
});

/* Styles go here */

.mousemove{
	height: 100px;
	width: 500px;
	background-color: #999;
}
.show{
	height: 20px;
	width: 500px;
	background-color: #ddd;
    opacity:1;
    position: relative;
    top: -20px;
}
.show.ng-hide {
    opacity:0;
    position: relative;
    top: 0px;
}