Skip to content

Instantly share code, notes, and snippets.

@awildeone
Created June 29, 2015 22:34
Show Gist options
  • Save awildeone/8692d33309bb8d207e7b to your computer and use it in GitHub Desktop.
Save awildeone/8692d33309bb8d207e7b to your computer and use it in GitHub Desktop.
jQuery Text Rotator
<h1> I am <div id="rotate"> <div>awesome.</div> <div>invincible.</div> <div>unbeatable.</div> <div>indestructible.</div> </div> </h1>
(function($){
$.fn.extend({
rotaterator: function(options) {
var defaults = {
fadeSpeed: 100,
pauseSpeed: 1000
,
child:null
};
var options = $.extend(defaults, options);
return this.each(function() {
var o =options;
var obj = $(this);
var items = $(obj.children(), obj);
items.each(function() {$(this).hide();})
if(!o.child){var next = $(obj).children(':first');
}else{var next = o.child;
}
$(next).fadeIn(o.fadeSpeed, function() {
$(next).delay(o.pauseSpeed).fadeOut(o.fadeSpeed, function() {
var next = $(this).next();
if (next.length == 0){
next = $(obj).children(':first');
}
$(obj).rotaterator({child : next, fadeSpeed : o.fadeSpeed, pauseSpeed : o.pauseSpeed});
})
});
});
}
});
})(jQuery);
$(document).ready(function() {
$('#rotate').rotaterator({fadeSpeed:200, pauseSpeed:7500});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
@awildeone
Copy link
Author

Goal to rotate text snippits on foursquarecamps.com. Not single words though. Might try putting the text snippits in side of separate html files, and then linking them in index.html div separators.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment