Submit your widget

JQuery InnerFade With Images and Text

Created 8 years ago   Views 21124   downloads 3012    Author medienfreunde
JQuery  InnerFade With Images and Text
View DemoDownload 124.4 KB
137
Share |

What is it?

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

The call

 

$('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'
     });
     
     $('ul#portfolio').innerfade({
      speed: 1000,
      timeout: 5000,
      type: 'sequence',
      containerheight: '220px'
     });
     
     $('.fade').innerfade({
      speed: 1000,
      timeout: 6000,
      type: 'random_start',
      containerheight: '1.5em'
     });
     
     $('.adi').innerfade({
      speed: 'slow',
      timeout: 5000,
      type: 'random',
      containerheight: '150px'
     });

   });
   </script>