用动画/ jQuery切换div中的img

我有一个代码，用于切换我的投资组合网站的div中的图像。我的问题是当图像切换时是否有添加动画的可能性 - FadeOut/FadeIn。我对jQuery真的很陌生，基本上只是开始编码，所以任何帮助表示赞赏！用动画/ jQuery切换div中的img

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改变图像的切换功能。那就是当我想使用动画时，它会看起来更整齐。

来源

2017-08-28 Vítek Linhart

制作片段，使更清晰 –

在这里，您可以使用animate()工作小提琴。还有很多其他的可能性，如fadeIn()，等，但动画是更灵活，因为你可以动画任何属性，只要你喜欢。

而且我缓存img元素在variable到提高性能并阻止Javascript跨越DOM一遍遍寻找的元素。请不要介意占位符图像的大小不同，这只是表明他们真正改变：

编辑：可以修改duration变量来改变动画的持续时间。

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

 
$(function() { 
 
\t $('a').on('mouseover', function() { 
 
    \t var iSrc = $(this).data('image-src'); 
 
\t \t img_elem.animate({ 
 
\t \t \t opacity:0 
 
\t \t },duration, function(){ 
 
\t \t \t img_elem.attr('src', iSrc).animate({ opacity:1 },duration); 
 
    \t });  
 
    }); 
 
});

<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>

来源

2017-08-28 09:44:55 hallleron

退房的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()); 
});

来源

2017-08-28 09:45:48 Martijn

这将淡出出来的图像，改变SRC，然后渐回。

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

来源

2017-08-28 09:57:59 Osama

用动画/ jQuery切换div中的img

回答

相关问题