Форум

valdislav · #1 (**permalink**) 10.01.2011, 13:19

Здравствуйте.
Посоветуйте пожалуйста, как реализовать следующую тривиальную задачу: нужно средствами 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'а.

Amphiluke · #2 (**permalink**) 10.01.2011, 13:27

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

valdislav · #3 (**permalink**) 10.01.2011, 13:37

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

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

Amphiluke · #4 (**permalink**) 10.01.2011, 14:07

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

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

Форум

Справочник

Discord чат

Курсы javascript