Javascript-форум - Плавное изменение src изображения onmouseover

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Плавное изменение src изображения onmouseover (https://javascript.ru/forum/jquery/14292-plavnoe-izmenenie-src-izobrazheniya-onmouseover.html)

Плавное изменение src изображения onmouseover

Здравствуйте.
Посоветуйте пожалуйста, как реализовать следующую тривиальную задачу: нужно средствами jQuery добиться того, чтобы при наведении мыши на изображение, плавно менялся его src на другое, того же размера. При убирании мыши все возвращается на исходную.

Насколько я понял, вариант с изменением через .attr немного не подходит, поскольку изменение резкое, не плавное (как с fadeIn/Out, где можно выставлять скорость):

Код:

$(function() {

     $("#imgblock")

          .mouseover(function() 

          { 

               $(this).attr("src").replace(/(img2.png)/g,"img1.png");

          })

          .mouseout(function() 

          {

               $(this).attr("src").replace(/(img1.png)/g,"img2.png");        

          });

});

Как можно реализовать "плавность" с возможностью регулирования скорости эффекта? Возможно, есть какой-то вариант с изменением не img, а именно бэкграунда div'а.

Можно сделать так: под картинку <img src="img1.png" /> подложить фоном картинку img2.png. И дальше при наведении применять методы fadeIn/Out к верхней картинке. Получится эффект плавной смены двух картинок.

Amphiluke,
сначала так и сделал и, к сожалению, такой вариант неприемлем - нижняя картинка предательски "выглядывает" из под верхней (размер img одинаков, а вот расположение прозрачных областей - не совсем).

Вот только если было можно сделать одновременно переход в видимое состояние нижней и переход в невидимое - верхней.

Вот что-то типа такого…

<!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="jquery-1.4.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#img img:eq(1)").hide();
		$("#img").hover(
			function() { $(this).find("img").animate({ opacity: "toggle" }, "slow"); },
			function() { $(this).find("img").animate({ opacity: "toggle" }, "slow"); }
		);
	});
</script>
</head>

<body>
	<div style="position:relative;" id="img">
		<img src="img1.png" style="position:absolute; left:0; top:0;" />
		<img src="img2.png" style="position:absolute; left:0; top:0;" />
	</div>
</body>
</html>