HTML Forum

**Nicky s** · 11-04-2009, 06:03 PM

i would like to use the effect that this site uses

http://www.beta.mostplays.com

were it says online games you will notice below that it changes now i know it is done buy jquery but i dont know anything about jquery i know the guy that runs the site but he told me to find it out myself

any one help

**bdg1115** · 11-04-2009, 06:47 PM

You can do it in Javascript. Check this link out:

http://medienfreunde.com/lab/innerfade/

I've never tried it, but hopefully it will work for you!

**Nicky s** · 11-04-2009, 06:56 PM

Quote:

Originally Posted by bdg1115

You can do it in Javascript. Check this link out:

http://medienfreunde.com/lab/innerfade/

I've never tried it, but hopefully it will work for you!

cheers for that mate

**bdg1115** · 11-04-2009, 07:23 PM

Anytime.

Did it work out for you?

**Nicky s** · 11-04-2009, 07:32 PM

yes m8 just playing around with the css why didnt it work for you this is how mine looks

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<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>
    <link rel="stylesheet" href="css/reset.css"  type="text/css" media="all" />
  <link rel="stylesheet" href="css/fonts.css"  type="text/css" media="all" />
  <style type="text/css" media="screen, projection">
     @import url(css/jq_fade.css);
  </style>
</head>
<body>
</code>
    
    <h3>A list with images and links</h3>
<ul id="portfolio">     
     <li>
      <a href="http://medienfreunde.com/deutsch/ref...guy.html"><img src="images/ggbg.gif" alt="Good Guy bad Guy" /></a>
     </li>
     <li>
      <a href="http://medienfreunde.com/deutsch/ref...ids.html"><img src="images/whizzkids.gif" alt="Whizzkids" /></a>
     </li>     
     <li>
      <a href="http://medienfreunde.com/deutsch/ref...ter.html"><img src="images/km.jpg" alt="Königin Mutter" /></a>
     </li>     
     <li>
      <a href="http://medienfreunde.com/deutsch/ref...ung.html"><img src="images/rt_arch.jpg" alt="RT Hybride Archivierung" /></a>
     </li>  
     <li>
      <a href="http://medienfreunde.com/deutsch/ref...ppe.html"><img src="images/tuev.jpg" alt="TÜV SÜD Gruppe" /></a>
     </li>    
    </ul>
</body>
</html>