Convert jQuery Hover to Angular

Question

I am trying to convert a piece of code from jQuery to Angular, and since I am super new to this I am not sure if I am doing this right.

Here is the jquery code:

$('ul.nav li.dropdown').hover(function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(300).fadeIn();
}, function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(300).fadeOut();
});

What it is doing is when I mouseover a nav item, a div fades in.

This is what I have tried, but nothing happens:

angular.module("headToggle", ["ngAnimate"]).animation(".management-settings", function(){
    return{
        enter: function(element, done){
            element.css("display", "none");
            element.fadeIn(200, done);
            return function(){
                element.stop();
            };
        },
        leave: function(element, done){
            element.fadeOut(200, done);
            return function(){
                element.stop();
            };
        }
    };
});

What am I doing wrong? Is what I am doing overkill?

Here is the fiddle: jsfiddle.net/6hwbhcaj I don't know why I am getting an error though, it works fine on my dev enviornment — Get Off My Lawn
– Get Off My Lawn, Commented May 15, 2015 at 23:10

Brent Washburne · Accepted Answer · 2015-05-15 23:21:21Z

2

You don't need Angular for this, you can do it with pure CSS:

.management-settings {
    opacity: 0;
    transition: opacity 200ms;
}

.management-settings:hover {
    opacity: 1;
}

The full documentation on transitions can be found here: Using CSS transitions

edited May 15, 2015 at 23:21

answered May 15, 2015 at 23:18

Brent Washburne

13.2k4 gold badges65 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Get Off My Lawn Over a year ago

This doesn't have a delay, and does it affect a different item on mouseover?

Brent Washburne Over a year ago

I added a reference to the CSS documentation, see transition-delay. This answer only affects items with class="management-settings"

Get Off My Lawn Over a year ago

I was able to remove .management-settings and do this: li.dropdown .dropdown-menu

Get Off My Lawn Over a year ago

I always forget about css transitions!

Legumebo_Magezfeld · Accepted Answer · 2015-05-15 23:20:40Z

I think you need to chain a .animation onto the element.css(), e.g:

element.css({'opacity', '0'}).animate({'opacity', '1'}, 200, done); This could also be accomplished with ng-mouseover to change a boolean variable bound to ng-class e.g: <div class=".dropdown-menu" ng-mouseover="hovered = true" ng-class={'is-hovered': hovered}></div>

Then in your css:

`.dropdown-menu{
    transition: opacity 200ms linear;
    opacity: 0;
}
.dropdown-menu.is-hovered{
   opacity: 1;
}`

Previous answer is correct, you can use angular's built-in directives and pure css, and not have to write any of your own JS

Arg, I don't have the rep to reply to your comment on the previous post, but you can use the css property transition-delay

Collectives™ on Stack Overflow

Convert jQuery Hover to Angular

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related