У меня есть код, который переключает изображения в div для моего сайта портфолио. У меня вопрос, есть ли возможность добавления анимации при переключении изображений - FadeOut / FadeIn. Я действительно новичок в jQuery, в основном только начал программировать, поэтому любая помощь приветствуется!

HTML

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  <title>Portfolio</title>
  <link rel="stylesheet" href="portfolio.css">
</head>

<body class="body">
  <!--Header-->
  <header class="header">
    <div class="logo">
      <div class="logoimg">
        <a href="land.html"><img src="logo.png" width="80px" width="auto"></a>
      </div>
    </div>
    <nav class="navbar">
      <a href="about.html">About</a>
      <a href="portfolio.html">Work</a>
    </nav>
  </header>

  <!--Main1-->
  <div class="thumbnail">
    <img src="back1.png" height="400px"; width="700px"></div>
  <ul class="headlines">
    <a href="http://leanart.one/" class="link" data-image-src="back1.png" id="link1">First Website</a>
    <a href="http://leanart.one/GatesNFences/index.html" class="link" data-image-src="back2.png" id="link2">Gates N' Fences</a>
    <a href="#" class="link" data-image-src="back3.png" id="link3">Storyboard</a>
    <a href="#" class="http://leanart.one/Animation/index.html" data-image-src="back4.png" id="link4">Animation</a>
    <a href="http://leanart.one/animation_interactive%202/animation.html" class="link" data-image-src="back5.png" id="link5">Interactive Animation</a>
    <a href="#" class="link" data-image-src="back6.png" id="link6">Star Wars Game</a>
    <a href="design_manual.pdf" class="link" data-image-src="back7.png" id="link7">Design Manual</a>
    <a href="abeonareport.pdf" class="link" data-image-src="back8.png" id="link8">Abeona</a>
    <a href="https://www.youtube.com/watch?v=eKEF14_bpQ8" class="link" data-image-src="back9.png" id="link9">Redningsscenarie</a>
    <a href="https://www.youtube.com/watch?v=7njS-wF-8wo&feature=youtu.be" class="link" data-image-src="back10.png" id="link10">Don't Mess With Karma</a>
  </ul>
  <!--Footer-->
  <footer class="footer">
    <p class="fotext">Copyright Vítek Linhart 2017.</p>
  </footer>

Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('a').on('mouseover', function() {
        var iSrc = $(this).attr('data-image-src');
        $('.thumbnail img').attr('src', iSrc);
      });

    });
  </script>
</body>

Это просто функция переключения всякий раз, когда ссылка зависает, она изменит изображение в div. И вот тогда я бы хотел использовать анимацию, чтобы она выглядела аккуратнее.

0
Vítek Linhart 28 Авг 2017 в 12:28

3 ответа

Лучший ответ

Вот вам и работающая скрипка с animate(). Есть много других возможностей, таких как fadeIn(), fadeOut() и т. Д., Но animate более универсален, поскольку вы можете анимировать любые свойства, какие захотите.

Также я кэшировал элемент img в variable для повышения производительности и предотвращения повторного обхода DOM JavaScript, чтобы найти этот элемент. И, пожалуйста, не обращайте внимания на различные размеры изображений заполнителей, это просто для того, чтобы показать, что они действительно меняются:

РЕДАКТИРОВАТЬ: Вы можете изменить переменную duration, чтобы изменить продолжительность анимации.

var duration = 500;
var img_elem = $('.thumbnail img');

$(function() {
	$('a').on('mouseover', function() {
  	var iSrc = $(this).data('image-src');
		img_elem.animate({
			opacity:0
		},duration, function(){
			img_elem.attr('src', iSrc).animate({ opacity:1 },duration);
  	});      
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumbnail">
  <img src="http://placehold.it/700x400" height="400px"; width="700px"></div>
  <ul class="headlines">
    <a href="http://leanart.one/" class="link" data-image-src="http://placehold.it/700x399" id="link1">First Website</a>
    <a href="http://leanart.one/GatesNFences/index.html" class="link" data-image-src="http://placehold.it/700x398" id="link2">Gates N' Fences</a>
  </ul>
1
hallleron 28 Авг 2017 в 09:44

Проверьте плагин jQuery Cycle2. Теперь это (легкое) слайд-шоу, но потерпите меня.

Запустите цикл, но сделайте мгновенную паузу. Для ваших посетителей это как будто есть только одно изображение, но Cycle загрузил все остальные слайды в фоновом режиме, отзывчивый.

$('.itemsWrapper').cycle({
    paused: true
    // and others settings to your likings:
    // http://jquery.malsup.com/cycle2/api/#options
});

Вы можете использовать функцию, подобную goto. Цикл исчезнет для вас, сэкономив вам много времени , пытаясь создать это самостоятельно.

$('.gotoSlide').on('click', function(e){
    e.preventDefault();

    // Clicked on 3rd button? Go to 3rd slide (etc):
    $('.itemsWrapper').cycle( 'goto', $(this).index() );
});
0
Flimzy 5 Июл 2018 в 12:46

Это приведет к исчезновению изображения, изменению src, затем вернет его обратно.

$('.thumbnail img').fadeOut('fast', function () {
$('.thumbnail img').attr('src', iSrc);
$('.thumbnail img').fadeIn('fast');
});
0
Osama 28 Авг 2017 в 09:57