div内のimgをアニメーション/ jQueryで切り替える

私のポートフォリオサイトのdiv内の画像を切り替えるコードがあります。私の質問は、画像が切り替わるときにアニメーションを追加する可能性があるかどうかです - FadeOut/FadeIn。私はjQueryを初めて使っています。div内のimgをアニメーション/ 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の中でイメージが変わりますかざしたときに出るだけで、スイッチング機能です。そして、それがアニメーションを使いたいときです。そうすれば、もっときれいに見えます。

出典

2017-08-28 Vítek Linhart

メイクスニペット –

ここでは、animate()で動作するフィドルと一緒に行く。 fadeIn()、などのような多くの可能性がありますが、アニメーションはあなたが好きなように任意のプロパティをアニメーション化できるので、より多用途です。

はまた、私はパフォーマンスを向上させるや要素を見つけるために、何度も何度もDOMをトラバースからJavaScriptを防ぐにvariableにimg要素をキャッシュされました。そして、プレースホルダ画像の異なるサイズを気にしないでください、これはちょうど彼らが実際に変更することを示すことである。

EDIT：あなたはアニメーションの再生時間を変更するには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をチェックしてください。さて、これは（軽量の）スライドショーですが、私と一緒に裸です。

サイクルを開始しますが、瞬時に一時停止します。あなたの訪問者にとっては、画像は1つだけですが、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

div内のimgをアニメーション/ jQueryで切り替える

答えて

関連する問題