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)

Lord_Jesus_,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .img {
      width: 300px;
      height: 200px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(http://img.funtema.ru/10112015/les/5.jpg);
      transition: .8s;
  }
  .img img{
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: opacity .8s;
  }
  .img.show img{
      opacity: 1;
  }
  nav a{
      font-size: 42px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var src = ["https://tvoidvor.com/wp-content/uploads/TelegramDesktop-min.jpg", "https://poster.nicefon.ru/2016_06/13/800x450/33349860e2e2ea69df6fc.jpg"];
  var div = $(".img");
  var img = $("img", div)[0];
  $("nav a").each(function(i, el) {
    $(el).mouseleave(function() {
      div.removeClass("show");
    }).mouseenter(function() {
      img.src = src[i];
      div.addClass("show");
     });
  });
});
  </script>
</head>

<body>
<nav>
    <a href="ссылка.php">текст</a>
    <a href="ссылка2.php">текст2</a>
</nav>
<div class="img">
  <img>
</div>
</body>
</html>

Цитата:

Сообщение от Lord_Jesus_

эффект был будто картинка зависала

надо останавливать одну анимацию, прежде чем запускать другую.

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

рони,
это неудобно будет задавать картинки через JS, может лучше использовать http://htmlbook.ru/css/attr ?

рони,
Спасибо Вам, приму за внимание

Цитата:

Сообщение от laimas

может лучше использовать

тогда уж лучше data - src

Плавное появление картинки

laimas,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .img {
      width: 300px;
      height: 200px;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url(http://img.funtema.ru/10112015/les/5.jpg);
      transition: .8s;
  }
  .img img{
      opacity: 0;
      width: 100%;
      height: 100%;
      transition: opacity .8s;
  }
  .img.show img{
      opacity: 1;
  }
  nav a{
      font-size: 42px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
  var div = $(".img");
  var img = $("img", div)[0];
  $("nav a").each(function(i, el) {
    var src = $(el).data("src");
    $(el).mouseleave(function() {
      div.removeClass("show");
    }).mouseenter(function() {
      img.src = src;
      div.addClass("show");
     });
  });
});
  </script>
</head>

<body>
<nav>
    <a href="ссылка.php" data-src="https://tvoidvor.com/wp-content/uploads/TelegramDesktop-min.jpg">текст</a>
    <a href="ссылка2.php" data-src="https://poster.nicefon.ru/2016_06/13/800x450/33349860e2e2ea69df6fc.jpg">текст2</a>
</nav>
<div class="img">
  <img>
</div>
</body>
</html>

А чисто на CSS никак? )

laimas,
я незнаю таких селекторов, условно nav a:hover ~ nav + div

Цитата:

Сообщение от рони

я незнаю таких селекторов

А :after нельзя?

Цитата:

Сообщение от laimas

А :after нельзя?

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