Javascript-форум - Плавное появление картинки при наведении на ссылку

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

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

- - Плавное появление картинки при наведении на ссылку (https://javascript.ru/forum/jquery/73730-plavnoe-poyavlenie-kartinki-pri-navedenii-na-ssylku.html)

Плавное появление картинки при наведении на ссылку

Код:

var imgs = new Array("img1.png", "img2.png", "img3.png");

function sh_img(a) {

 

 

    var obj = document.getElementById("img");

        obj.src = imgs[a];

 

 

  }

<nav>
    <a href="ссылка.php"  onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст</a>
        <a href="ссылка2.php"  onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст2</a>
    
  </nav>
  <div>
  <img src=""img1.png" id="img">
  </div>

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

Пробовал сделать так...

Код:

var imgs = new Array("img1.png", "img2.png", "img3.png");

function sh_img(a) {

 

       $('#img').animate({'opacity': 0}, 500).hide();

    var obj = document.getElementById("img");

        obj.src = imgs[a];

 

       $('#img').show().animate({'opacity': 1}, 500);

  }

это конечно неправильно,и работает не корректно и говорит о том что у меня нехватка знаний, подскажите пожалуйста как нужно правильно все это реализовать,,,

http://api.jquery.com/category/effects/fading/
fadeIn / fadeOut не пробовали?

j0hnik,
А не могли бы вы мне помочь, как правильно и корректно применить это в своем коде?? если вас не затруднит,,,

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>

	<a href="ссылка.php"  onMouseOver="sh_img(1)" onMouseOut="sh_img(0);">текст</a>
	<a href="ссылка2.php"  onMouseOver="sh_img(2)" onMouseOut="sh_img(0);">текст</a>
	<img src="img0.png" id="img">
	<script>
		function sh_img(a){
			$("#img").fadeOut( "slow", function() {
				$("#img").prop('src', 'img'+a+'.jpg');
				$("#img").fadeIn("slow");
			});
		}

	</script>
</body>
</html>

img0 - это изображение по умолчанию.

j0hnik,
Я немного переделал, вы конечно я так хорошо владеете этим языком по крайней мере знаете побольше намного чем я...

правильно ли будет если я немного изменил ваш код и сделал так...???

var imgs = new Array("img1.png", "img2.png", "img3.png");
function sh_img(a){
			$("#img").fadeOut( "slow", function() {
				$("#img").prop('src',  imgs[a]);
				$("#img").fadeIn("slow");
			});
		}

все работает отлично, спасибо огромное за помощь,
А можно ли изменить интервал,чтобы появление и затухание происходило быстрее?

Lord_Jesus_,
вместо "slow" можете указать число в мс
например 1000 - эта секунда.

j0hnik,
Спасибо за помощь

j0hnik,
а если быстро поводить курсором по ссылкам?

рони,
эффект был будто картинка зависала
но после того как я понизил время интервала появление как посоветовал мне "j0hnik", все прорисовываеться плавно