Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularJS Directive for looping through and displaying multiple headers
directives.directive('headerSwitcher', function() {
return {
restrict: 'A',
scope: {
elementType: '='
},
link: function(scope, element, attrs) {
var headers = $(element).children(scope.elementType),
headerIndex = -1;
function showNextHeader() {
++headerIndex;
// show first header immediately
if(headerIndex === 0) {
headers.eq(headerIndex % headers.length)
.show()
.delay(2500)
.fadeOut(1000, showNextHeader);
}
// then fade them in
else {
headers.eq(headerIndex % headers.length)
.fadeIn(1000)
.delay(2500)
.fadeOut(1000, showNextHeader);
}
}
showNextHeader();
}
};
});
<div header-switcher="h1">
<h1 style="display:none">First Header</h1>
<h1 style="display:none">Second Header</h1>
<h1 style="display:none">Third Header</h1>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment