Code & Config – sharing the smart bits

There are cases when it is very useful to grab plug-in which does the job for us but it is not always necessary. Usually plug-ins are build the way so they count with many different possibilities, options and settings. This can make the code larger.
Sometimes the required result can be achived with just a basic jQuery knowledge with few lines of code which can be part of your general.js file which means you will not have additional http requests when your page loads.

In my example I will show you have to create simple animation which can loop through various types of element producings various effects.

You can see the final result in the header on the lewro.com.

// We will be animating quotes
$(function (){

  // In our example they sit in the div with id quotes and every quote is paragraphs
 // We could easily changed this if we have for example  list of them $('#quotes li') or if they are images $('#quotes img'). You obviously do not have to keep the id quotes. It can be anything. Class or ul

  $quotes = $('#quotes p');
  $quotesSize = $($quotes).length; // we need to know how many elements we have, using length function

 // Setting the intervals for animation
  $n=0;
  $interval = 5000;
  $hideInterval = 300;
  $showInterval = 500;

  // Loop through quotes
  function loopQuotes (){

   $actual_quote = $quotes[$n];

  // This might look complicated but lets breake it down. Before the word "filter" we are saying hide the cover element with id qotes and filter mean that it be applied to all but not the actaul_quote (the one we are just looping through), that one will be showned.
   $($quotes).hide($hideInterval).filter($($actual_quote).show($showInterval));

    $n++;
          // Here we saying that when it loops through all of them then start from beginning (reset the counter to 0)
 	  if($n == $quotesSize) $n = 0;
 	  setTimeout(loopQuotes,$interval);
  }

  // call the looping animation
  loopQuotes();
});

As you can see in this example I am using jQuery functions hide() & show(), these could be replaced with fedeOut, fadeIn or slideUp, slideDown and so on.