AngularJS fadeit directive with a bit of jQuery

This is a simple directive for angularjs. It fade in and out any element that has the attribute fadeit in it.
Extra attributes can be used to control the directive. Of course this could be done with jQuery alone but this a just a reference for my personal use.

app.directive("fadeit", function () {
	return {
		restrict:"A",
		link:function (scope, iElement, iAttrs, controller) {
			var opacityEnter = iAttrs.opacityEnter ? Number(iAttrs.opacityEnter) : 1;
			var opacityLeave = iAttrs.opacityLeave ? Number(iAttrs.opacityLeave) : 0.8;
			var duration = iAttrs.duration ? Number(iAttrs.duration) : 250;
			$(iElement).fadeTo(0, opacityLeave);
			iElement.bind("mouseenter", function () {
				console.log('mouseenter');
				$(iElement).fadeTo(duration, opacityEnter);
			});
			iElement.bind("mouseleave", function () {
				console.log('mouseleave');
				$(iElement).fadeTo(duration, opacityLeave);
			});

		}
	};
});

Leave a Reply