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;
        }
    };
}

score 2 · Answer 1 · answered May 12 '15 at 22:20

2

Here you go: http://jsfiddle.net/Lckf7kgm/4/ You need the ng-Animate module.

<div ng-app="myapp">
    <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>

HTML

.top {
    background-color: blue;
    width: 100%;
    height: 150px;
}
.bottom {
    background-color: red;
    width: 50%;
    margin-left: 25%;
    height: 300px;
}
.bottom {
    -webkit-transition: all 2s ease;
    /* Safari */
    transition: all 2s ease;
}
.bottom.ng-hide {
    opacity:0;
}

JS

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

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

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

answered May 12 '15 at 22:20

Michelangelo

5,888
5
31
50

So much closer than I got myself! Any way to make it so it doesn't reset the animation when you go from the blue box to the red box? – Parzi May 12 '15 at 22:23
1

Well that is pretty hard in your current setup since you fire the same function for both divs, but you could go for something like this http://jsfiddle.net/2jRC8/. This solution will allow you to detect where the mouse position is and with an extra if statement you can prevent the animation to reset. – Michelangelo May 12 '15 at 22:40
Found a work around.... Putting a blank div "between" the two div's What do you think? http://jsfiddle.net/Lckf7kgm/5/ – Parzi May 12 '15 at 22:49
Why not. It is not the most elegant solution but it works and that is what matters. – Michelangelo May 12 '15 at 22:56
Uncaught Error: [$injector:unpr] Unknown provider: $$qProvider <- $$q <- $animate <- $compile What do I need to add to my project to get it to work? I added the CDN for angular-animate and I also added it to my app.js var app = angular.module("Test", ['angular.filter', 'ngAnimate']); – Parzi May 12 '15 at 23:04
Never mind I had an outdated version of Angular in there. Updated that and now it's working. :D Thanks Mikey. – Parzi May 12 '15 at 23:15
This is WAY complicated. :( I have links inside the menu (obviously) And every time I move from one link to the next the animation resets...... Anyone know of a better way to do this with either jQuery, Angular, or CSS? – Parzi May 12 '15 at 23:20
Maybe it is better to acutally tell us what you are really trying to achieve. I have a feeling you don't even need JS for this. – Michelangelo May 13 '15 at 10:23

score 1 · Accepted Answer · answered May 12 '15 at 23:34

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.

This one is a lot smoother and it doesn't get reset with my links that are inside the "bottom" div. :D — Parzi, May 13 '15 at 15:34

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

2 Answers2