InnerFade маленький плагин для библиотеки jQuery. Он создан, чтобы можно было добавить любому элементу эффект растворения. Элемент может быть чем угодно: картинкой, списком, div’ом. Очень просто сделать newsticker, анимацию или слайдшоу с Вашим портфолио или рекламой.

Вызов:

$('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' or 'random' (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>

Примеры:
Newsticker с типом анимации slide:

• 1 Lorem ipsum dolor
• 2 Sit amet, consectetuer
• 3 Sdipiscing elit,
• 4 sed diam nonummy nibh euismod tincidunt ut

<ul id="news">
  <li>  <a href="#n1">1 Lorem ipsum dolor</a>  </li>
  <li>  <a href="#n2">2 Sit amet, consectetuer</a>  </li>
  <li>  <a href="#n3">3 Sdipiscing elit,</a>  </li>
  <li>  <a href="#n4">4 sed diam nonummy nibh euismod tincidunt ut</a>  </li> 
</ul>

Список с картинками и ссылками:

<ul id="portfolio">
 <li>  <a href="http://medienfreunde.com/deutsch/
          referenzen/kreation/good_guy__bad_guy.html">  
        <img src="images/ggbg.gif" alt="Good Guy bad Guy" />  </a>  </li>
 <li>  <a href="http://medienfreunde.com/deutsch/
          referenzen/kreation/whizzkids.html">
       <img src="images/whizzkids.gif" alt="Whizzkids" />  </a>  </li>
 <li>  <a href="http://medienfreunde.com/deutsch/
          referenzen/printdesign/koenigin_mutter.html">
       <img src="images/km.jpg" alt="Königin Mutter" />  </a>  </li>
 <li>  <a href="http://medienfreunde.com/deutsch/
          referenzen/webdesign/rt_reprotechnik_-_hybride_archivierung.html">
      <img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" />  </a>  </li>
 <li>  <a href="http://medienfreunde.com/deutsch/
          referenzen/kommunikation/tuev_sued_gruppe.html">
      <img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" />  </a>  </li> 
</ul>

Элементы с классами

<div class="fade"> 
  <p>  1 </p>
  <p>  2 </p>
  <p>  3 </p>
  <p>  4 </p>
  <p>  5 </p>
  <p>  6 </p>
  <p>  7 </p>
  <p>  8 </p>
  <p>  9 </p>
  <p>  10 </p> 
</div>
<div class="fade"> 
  <p>  A </p>
  <p>  B </p>
  <p>  C </p>
  <p>  D </p>
  <p>  E </p>  
  <p>  F </p>
  <p>  G </p>
  <p>  H </p>
  <p>  I </p>
  <p>  J </p>
  <p>  K </p>
  <p>  L </p>
  <p>  M </p>
  <p>  N </p>
  <p>  O </p>
  <p>  P </p>
  <p>  Q </p>
  <p>  R </p>
  <p>  S </p>
  <p>  T </p>
  <p>  U </p>
  <p>  V </p>
  <p>  W </p>
  <p>  X </p>
  <p>  Y </p>
  <p>  Z </p> 
</div>

Скачать:
jquery.innerfade.zip (118kb)

Источник:
InnerFade with JQuery

Популярность: 58%