Question

Im trying to create a fade effect between “two” images just using one image in two containers and shifting the background postion. Below is the following HTML markup I’m working with.

<div class="project">
    <a href="b-portfolio-detail.php?project=52"><img src="../projects/life4wrd.jpg" alt="Life4wrd" border="0" /></a>
    <a href="b-portfolio-detail.php?project=53" class="cover" style="background-position:0 -302px;">Life4wrd</a>
</div><!--/project-->

And here is the little jQuery I have.

$('.project img').attr('src');

There are multiple div.project contains, each with their own thumbnail. What I would like to do for each project div is to get the src from the img in the first anchor link and set that as a background for the second anchor link, (the one with the class called “cover”) and also set the background position on the div.cover to 0px -302px.

I understand how to get the img src attribute but Im not sure how to get it for each div.project and also how to pass it back in a the background image for .cover.

Answer 1

$('.project .cover').css({display:'none',backgroundPosition:'0 -302px'}).attr('src',$('.project img').attr('src')).fadeIn();
$('.project img').fadeOut();

something like this?