Question

我有一个代码可以在我的投资组合网站的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中的图像。那就是我想使用动画的时候，它看起来更整洁。

Answer 1

在这里，您将与animate()一起工作。还有许多其他可能性，如fadeIn()，fadeOut()等，但动画更通用，因为您可以根据需要为任何属性设置动画。

此外，我将img中的variable元素缓存到提高性能，并阻止JavaScript反复遍历DOM以查找元素。请不要介意占位符图像的不同大小，这只是为了表明它们实际发生了变化：

编辑：您可以修改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>

Answer 2

查看jQuery Cycle2 plugin。现在，这是一个（轻量级）幻灯片，但请耐心等待。

开始循环，但进行即时暂停。对于您的访问者来说，它就像只有一个图像，但是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() );
});

Answer 3

这会使图像淡出，更改src，然后将其淡入。

$('.thumbnail img').fadeOut('fast', function () {
$('.thumbnail img').attr('src', iSrc);
$('.thumbnail img').fadeIn('fast');
});

用动画/ jQuery切换div中的imgs

3 个答案: