can't get setTimeout to clear in a directive?

[yahya Kacem]

Hi, I made this plunker with an example of my problem, I need to make a directive that on mouse enter it add and remove classes to the element like this:

removeClass('class1');
addClass('class2');
removeClass('class2');
addClass('class3');
removeClass('class3');
addClass('class4');
removeClass('class4');
addClass('class5');

Of course in better way, and on mouse leave do the reverse, but it's not working.

Any help, thanks in advance. 

[Florian Orben]

Hey there,

you can't use element.on if you didn't include jquery - you have to use element.bind

If you just want to switch classes on mouseenter/leave you can do it this way:

http://plnkr.co/edit/II6ui7rtZ8up17VyPsm4?p=preview

In the plnkr are also two other divs, showcasing you how to switch the class even without a directive

- Flo

[yahya Kacem]

That's not what i want actually, I don't want to just switch between 2 classes, but more like 5 classes or more so if you look to my first plunker you'll see a function called changeClass it will change the classes from class1 to class5 and if you look at the style.css file you'll see 5 classes there waiting to be used.

So basically I want to switch between 5 classes with a delay to give the hovered element some animated effect.

I hope it's clear enough, and thanks for replaying.

[yahya Kacem]

Note the plunker that I provide will cause problem in browser because the setTimeout doesn't get cleared so it will run forever be careful not to cause your computer to run out of memory.

Sorry. :)

On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:

[Clint Checketts]

Here is a plunk that doesn't crash the browser (though it doesn't animate either): http://plnkr.co/edit/zYOdpsuww4Bo6srFAZ4v?p=preview

You have a few issues, you are treating setTimeout as setInterval. A timeout runs just once, so I moved the if block to set if it will fire the next timeout or not. Also consider switching fro setTimout to use $timeout

-Clint

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Florian Orben]

Ah got you wrong there, here's an example with timeout to fake an animation ;) :

http://plnkr.co/edit/II6ui7rtZ8up17VyPsm4?p=preview

Am Dienstag, 12. März 2013 19:25:31 UTC+1 schrieb yahya Kacem:

[yahya Kacem]

Thanks, that's exactly what i'm looking for.

On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:

[yahya Kacem]

Actually there"is a bug with this solution, it requires that the element can only have one class if it had multiple classes they will be removed, example plunker here.

On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote:

[yahya Kacem]

Hi, again I change the approach to this problem, now I'm not using any directives, but still can't seem to get the functionality that I'm looking for, here's a plunker with an example code, by the way I'm using underscore for looping through the array of classes.

On Tuesday, March 12, 2013 7:25:31 PM UTC+1, yahya Kacem wrote: