Vítek Linhart Vítek Linhart - 2 months ago 16
HTML Question

Switching imgs in div with an animation / jQuery

I have a code that switches images in a div for my portfolio site. My question is if there is a possibility of adding an animation when the images switch - FadeOut / FadeIn. I am really new to jQuery, basically just started coding so any help is appreciated!

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>


This is just the switching function whenever a link hovers it will change the image in a div. And that's when I would like to use an animation so it would look neater.

Answer Source

Here you go with a working fiddle with animate(). There are lots of other possibilities like fadeIn(), fadeOut() etc. but animate is more versatile as you can animate whatever properties as you like.

Also I cached the img element in a variable to improve performance and prevent JavaScript from traversing the DOM over and over again to find the element. And please don't mind the different sizes of the placeholder images, this is just to show that they actually change:

EDIT: You can modify the duration variable to change the animation 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>