Hi,

I have a question about a little plugin/script I found and modified. If you could offer some advice I'd really appreciate it. I am not a javascript programmer so my question may be quite elementary?

I am playing around with a fade hover script. The original script worked great when dealing with only images inside of a container:

$(document).ready(function(){
$(".folio img").hover(function(){
  $(this).fadeTo(300, 0.1);
  },
  function(){
  $(this).fadeTo(300, 1.0);
  });
});

However, what I wanted to do was make a piece of text also trigger the effect on the image. I got it working well here:
http://danhoydesign.com/jQuery/fadehover

This is the markup for each portfolio item:

<a href="#" class="one">
<img src="images/01.png" width="300" height="190"/>
<em>lorem Ipsum Dolor</em>
<span>Web site design, development &amp; CMS</span>
</a>

The problem is the script is not very efficient since the custom.js currently needs to be updated manually each time I add a new portfolio item:

$(document).ready(function(){

$(".folio .one img, .fadeImg .one em").hover(function(){
  $(".one img").fadeTo(300, 0.1);
  },
  function(){
  $(".one img").fadeTo(300, 1.0);
  });

$(".folio .two img, .fadeImg .two em").hover(function(){
  $(".two img").fadeTo(300, 0.2);
  },
  function(){
  $(".two img").fadeTo(300, 1.0);
  });
 
$(".folio .three img, .fadeImg .three em").hover(function(){
  $(".three img").fadeTo(300, 0.0);
  },
  function(){
  $(".three img").fadeTo(300, 1.0);
  });

});

I would really like to automate the process, but don't know how. If you could help me, I'd really appreciate it.

Thanks for your time,
Dan