Форум

Kirilbl4 · #1 (**permalink**) 18.02.2016, 14:29

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

Есть 4 изображения: первые две - уменьшенные миниатюры вторых. При клике на миниатюры изменяются большие изображения. Но сейчас меняются резко. Как добавить плавности в этот процесс?

Немного кода

html

<img src="img/p1.png" class="n_p_1" alt="" />(уменьшенное изображение)
<img src="img/p2.png" class="n_p_2" alt="" />(уменьшенное изображение)

<img src="img/p1.png" class="f_p_1" alt="" />(100% изображение)
<img src="img/p2.png" class="f_p_2" alt="" />(100% изображение)

js

$(".n_p_1").click(function(){
$(".f_p_1").show();
$(".f_p_2").hide();
});
$(".n_p_2").click(function(){
$(".f_p_2").show();
$(".f_p_1").hide();
});

и css

.f_p_2, {
display: none;
}

destus · #2 (**permalink**) 18.02.2016, 14:40

Kirilbl4,
а если в show и hide передавать время?

Kirilbl4 · #3 (**permalink**) 18.02.2016, 14:49

если поставлю show(1000), то изображение будет появляться снизу слева, а это не есть гуд, а если вместо 1000 прописать 2s, то скрипт отрубается и не работает.

рони · #4 (**permalink**) 18.02.2016, 14:54

Kirilbl4,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .n_p{
    height: 50px;
    width: auto;
  }
   .f_p{
       -webkit-transition: all .8s ease-in-out;
       -moz-transition: all .8s ease-in-out;
       -o-transition: all .8s ease-in-out;
       transition: all .8s ease-in-out;
       -webkit-transform: scale(0);
       -moz-transform: scale(0);
       -o-transform: scale(0);
       transform: scale(0);
       position: absolute;
       height: 80%;
       width: auto;
   }
   .show{
       -webkit-transform: scale(1);
       -moz-transform: scale(1);
       -o-transform: scale(1);
       transform: scale(1);
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
      $(".n_p").on("click", function() {
      var i = $(".n_p").index(this);
      $(".f_p").not($(".f_p").eq(i).addClass("show")).removeClass("show")
})
   })
  </script>
</head>

<body>
 <img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="n_p" alt="" />
 <img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="n_p" alt="" />

 <img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="f_p show" alt="" />
 <img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="f_p" alt="" />

</body>

</html>

Kirilbl4 · #5 (**permalink**) 18.02.2016, 15:03

О, спасибо, че то я про присвоение класса и не подумал. А можно как то анимацию заменить? Вот тут есть отличный пример в блоке где выбор моделей и цветов. http://www.iphone-rigt.ru/

рони · #6 (**permalink**) 18.02.2016, 15:25

Kirilbl4,
css учите или ищите

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .n_p{
    height: 50px;
    width: 100px;
  }
   .f_p{
       -webkit-transition: all .8s ease-in-out;
       -moz-transition: all .8s ease-in-out;
       -o-transition: all .8s ease-in-out;
       transition: all .8s ease-in-out;
        opacity: 0;
       position: absolute;
       height: 250px;
       width: 500px;
   }
   .show{
       opacity: 1;
   }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script>
   $(function(){
      $(".n_p").on("click", function() {
      var i = $(".n_p").index(this);
      $(".f_p").not($(".f_p").eq(i).addClass("show")).removeClass("show")
})
   })
  </script>
</head>

<body>
 <img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="n_p" alt="" />
 <img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="n_p" alt="" />

 <img src="http://www.tecmundo.com.br/imagens/2013/5/materias/3671527171051-t250.jpg" class="f_p show" alt="" />
 <img src="http://cs5.pikabu.ru/images/big_size_comm/2015-10_2/1444226708114674995.jpg" class="f_p" alt="" />

</body>

</html>

Kirilbl4 · #7 (**permalink**) 18.02.2016, 15:43

супер, огромаднейшее спасибо

Форум

Справочник

Discord чат

Курсы javascript