Форум

Lord_Jesus_ · #1 (**permalink**) 10.05.2018, 15:49

Код:

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);
  }

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

j0hnik · #2 (**permalink**) 10.05.2018, 15:54

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

Lord_Jesus_ · #3 (**permalink**) 10.05.2018, 16:00

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

j0hnik · #4 (**permalink**) 10.05.2018, 16:15

<!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 - это изображение по умолчанию.

laimas · #5 (**permalink**) 10.05.2018, 16:20

CSS3 - transition

Lord_Jesus_ · #6 (**permalink**) 10.05.2018, 16:35

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");
			});
		}

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

j0hnik · #7 (**permalink**) 10.05.2018, 16:37

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

Lord_Jesus_ · #8 (**permalink**) 10.05.2018, 16:38

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

рони · #9 (**permalink**) 10.05.2018, 16:48

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

Lord_Jesus_ · #10 (**permalink**) 10.05.2018, 16:51

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

Форум

Справочник

Discord чат

Курсы javascript