Нужна помощь в создании эффекта исчезающего изображения с одним изображением и jquery

Question

Я пытаюсь создать эффект затухания между «двумя» изображениями, просто используя одно изображение в двух контейнерах и меняя положение фона. Ниже приведена следующая HTML-разметка, с которой я работаю.

<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-->

А вот маленький jQuery, который у меня есть.

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

Существует несколько div.project, каждый со своим миниатюрой. То, что я хотел бы сделать для каждого проекта div, это получить src из img в первой ссылке привязки и установить его в качестве фона для второй ссылки привязки (той, что с классом «cover»), а также установить фоновое положение на div.cover до 0px -302px.

Я понимаю, как получить атрибут img src, но я не уверен, как получить его для каждого div.project, а также как передать его обратно в фоновое изображение для .cover.

Answer 1

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

как то так?