/ Published in: jQuery
Uses malsup's jquery cycle plugin. Advanced pager and custom jquery animations.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
jQuery('div#home-slide').after('<ul id="home-slide-btns">').cycle({ fx: 'fade', timeout: 9000, pager: '#home-slide-btns', cleartype: 1, before: onBefore, after: onAfter, pagerAnchorBuilder: function(idx, slide) { var title = jQuery(slide).children('h4').html(); return '<li class="btn-' + idx + '"><a href="#">' + title + '</a></li>'; } }); function onBefore() { jQuery(this).siblings().children('div#home-slide h4, div#home-slide p.desc, div#home-slide p.link').removeAttr("style"); } function onAfter() { jQuery(this).siblings().children('div.image').removeAttr("style"); jQuery(this).children('div.image').delay(500).fadeIn(2000); jQuery(this).children('h4.slide-0').delay(1000).animate({'top':'32'}, 1000, 'easeOutQuint'); jQuery(this).children('h4.slide-1, h4.slide-2').delay(1000).animate({'top':'145'}, 1000, 'easeOutQuint'); jQuery(this).children('h4.slide-3').delay(1000).animate({'top':'70'}, 1000, 'easeOutQuint'); jQuery(this).children('p.desc').delay(2000).show('drop', {direction:"down"}, 800); jQuery(this).children('p.link').delay(3000).show('drop', {direction:"down"}, 800); }