Archiwum tagu: plugin InnerFade

Animacje w jQuery/plugin InnerFade

InnerFade to mała wtyczka do jQuery JavaScript Library. Dzięki niej stworzysz własny pasek najnowszych wiadomości, czy animacji, np. pokaz swojego portfolio lub blok reklamowy na Twoją stronę. Elementy mogą być dowolne, np. zdjęcia, listy, artykuły, DIV.

To bardzo łatwe :) Zobacz jak działa :)

HTML

$('ID or class of the element containing the fading objects')
                                                   .innerfade({
animationtype: Type of animation 'fade' or 'slide'
               (Default: 'fade'),
speed: Fadingspeed in milliseconds or keywords
       (slow, normal or fast)(Default: 'normal'),
timeout: Time between the fades in milliseconds
         (Default: '2000'),
type: Type of slideshow: 'sequence', 'random'
      or 'random_start' (Default: 'sequence'),
containerheight: Height of the containing element
                 in any css-height-value (Default: 'auto')
runningclass: CSS-Class which the container
              get’s applied (Default: 'innerfade')
});


<script type="text/javascript">
	$(document).ready(
		function(){
			$('#news').innerfade({
				animationtype: 'slide',
				speed: 750,
				timeout: 2000,
				type: 'random',
				containerheight: '1em'
			});

			$('#portfolio').innerfade({
				speed: 'slow',
				timeout: 4000,
				type: 'sequence',
				containerheight: '220px'
			});

			$('.fade').innerfade({
				speed: 'slow',
				timeout: 1000,
				type: 'sequence',
				containerheight: '1.5em'
			});
		}
	);
</script>

DOWNLOAD

jquery.innerfade.zip (124kb)

źródło: medienfreunde.com