ロールオーバー時にgifが点滅する

gifを表示するためにこのdivの上にマウスを置いたときに発生するちらつきを修正する解決策を見つけるのに問題があります。 HEREは、私が話していることの例です。ロールオーバー時にgifが点滅する

コードはjpgsでうまく動作しますが、gifではうまく動作しません。私はそれが重複またはプリロードの問題だとは思わない。

私はまた、最初の3つのdivがぶら下げられてもちらつかないことに気付きました。問題は3番目のdivの後にのみ発生します。

誰でもこの問題の原因が分かっていますか？

function ShowPicture(id,Source) { 
 
    if (Source=="1"){ 
 
    if (document.layers) document.layers[''+id+''].visibility = "show" 
 
    else if (document.all) document.all[''+id+''].style.visibility = "visible" 
 
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible" 
 
    } 
 
    else 
 
    if (Source=="0"){ 
 
    if (document.layers) document.layers[''+id+''].visibility = "hide" 
 
    else if (document.all) document.all[''+id+''].style.visibility = "hidden" 
 
    else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden" 
 
    } 
 
    }

a:link { 
 
     text-decoration: underline; 
 
     text-align: center; 
 
     cursor:pointer; 
 
     color: black; 
 
     text-decoration: none; 
 

 
    } 
 
    a:visited { 
 
     cursor:pointer; 
 
     color: black; 
 
    } 
 
    a:hover { 
 
     color:black; 
 
     cursor:pointer; 
 
     color: black; 
 
      border-bottom: 1px solid black; 
 
    } 
 
    a:active { 
 
     color: black; 
 

 
    } 
 
    #imagebox{ 
 
    \t width:100%; 
 
    \t position: fixed; 
 
    \t text-align: center; 
 
     \t top: 50%; 
 
     left:50%; 
 

 
    } 
 

 
    #list{ 
 
     top:25px; 
 
     width: 40px; 
 
     height: 35px; 
 
     text-align: left; 
 
    right:25px; 
 
     position: fixed; 
 
     background: url("../images/L.png"); 
 
     cursor:pointer; 
 
     border-bottom:none; 
 
    } 
 

 
    } 
 

 
    #list.hover{ 
 
     border-bottom:none; 
 
    } 
 
    #Style{ 
 
     position:absolute; 
 
    visibility:hidden; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 

 
    } 
 
    #StyleX { 
 
    position:absolute; 
 
    visibility:hidden; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 
    #StyleY { 
 
    position:absolute; 
 
    visibility:hidden; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 

 
    #StyleZ { 
 
    position:absolute; 
 
    visibility:hidden; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 

 
    #StyleA { 
 
    position:absolute; 
 
    visibility:hidden; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 

 
    #StyleB { 
 
    position:absolute; 
 
    visibility:hidden; 
 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 

 
    #StyleC { 
 
    position:absolute; 
 
    visibility:hidden; 
 

 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 

 
    #StyleD { 
 
    position:absolute; 
 
    visibility:hidden; 
 

 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    } 
 
    #StyleE { 
 
    position:absolute; 
 
    visibility:hidden; 
 

 
    transform: translate(-50%, -50%); 
 
    -webkit-transition: 0s; 
 
    -moz-transition: 0s; 
 
    -o-transition:  0s; 
 

 
    }

<html lang="en"> 
 
    <head> 
 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,800,600,300' rel='stylesheet' type='text/css'> 
 
    <link rel="shortcut icon" type="image/png" href="../images/favicon.png"/> 
 
    <meta charset="utf-8"> 
 
    <title>Lily Clark</title> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    <script src="javascrip.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
 

 
    </head> 
 
    <body> 
 
    <a href="http://www.lilyclark.com/about" id="list"></a> 
 

 
    <a href="#" onmouseEnter="ShowPicture('Style',1)" onmouseLeave="ShowPicture('Style',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Column Vase</span><span id="date">2016&nbsp;&nbsp;&nbsp;for <a href"http://www.feel.company">FEEL</a></span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleD',1)" onmouseLeave="ShowPicture('StyleD',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Gravity is Stronger Here</span><span id="date">2015&nbsp;&nbsp;&nbsp;for <a href"http://www.landl.us">L+L</a></span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleY',1)" onmouseLeave="ShowPicture('StyleY',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Blinds Be&shy;tween Boul&shy;ders</span><span id="date">2015&nbsp;&nbsp;&nbsp;Jumbo Rocks, Joshua Tree</span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleX',1)" onmouseLeave="ShowPicture('StyleX',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Fli&shy;cker Ton&shy;ic</span><span id="date">2015&nbsp;&nbsp;&nbsp;for Tilt</span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleC',1)" onmouseLeave="ShowPicture('StyleC',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Printed Shards</span><span id="date">2015&nbsp;&nbsp;&nbsp;with <a href"http://www.tristanscow.com/">Tristan Scow</a></span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleE',1)" onmouseLeave="ShowPicture('StyleE',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Bound 2</span><span id="date">2015&nbsp;&nbsp;&nbsp;for <a href"http://contemporary.org">The Contemporary</a></span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleA',1)" onmouseLeave="ShowPicture('StyleA',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Novacom/Basin</span><span id="date">2015&nbsp;&nbsp;&nbsp;with <a href"https://slumdiscs.bandcamp.com/merch/slumdiscs-01">Slum&shy;discs</a></span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleB',1)" onmouseLeave="ShowPicture('StyleB',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Oh So Cards</span><span id="date">2015&nbsp;&nbsp;&nbsp;for <a href="https://www.youtube.com/watch?v=KT5nXzQLhDI">Budget Prom</a></span> 
 
    <br> 
 
    <a href="#" onmouseEnter="ShowPicture('StyleZ',1)" onmouseLeave="ShowPicture('StyleZ',0)" id="squareone"><img src="images/V1.jpg" style="width:25px; height:25px;"></a><span id="pname">Ra&shy;king Light</span><span id="date">2014&nbsp;&nbsp;&nbsp;</span> 
 

 

 
    </div> 
 

 
    <div id="imagebox"> 
 
    <div id="Style"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif" style="width:70%;"></div> 
 
    <div id="StyleX"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.giff"style="width:70%;"></div> 
 
    <div id="StyleY"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    <div id="StyleZ"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    <div id="StyleA"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    <div id="StyleB"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    <div id="StyleC"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    <div id="StyleD"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    <div id="StyleE"><img src="https://media.giphy.com/media/GRld0uPxi1V1C/giphy.gif"style="width:70%;"></div> 
 
    </div> 
 
    </body> 
 
    </html>

出典

2016-05-03 Lily

私のマシン上でそれを再現することはできません。多分それはそれを表示する前に、あなたのgifをプリロードすることをお勧めしますが。 – roNn23

あなたの代わりにvisibilityをopacityを使用する場合は、小さなtransitionを導入することができますし、（それらが異なる場合）、画像ブレンディングを参照して、デモのために私はそれらのいくつかにtransform:scale(x)を追加しました。

注：あなたは[ "ID^= startwth]でIDに使うセレクタの数を減らすことができるか、また、ちょうど同様にそのIDは一度しか使用することができますCOMMUNクラスお知らせを追加することができます。

出典

2016-05-03 16:09:35

ありがとう！これは仕事ができるように思え、しかし、することができますあなたが意味することを説明してください： "ID：[id^= startwth"]でIDに使用するセレクタの数を減らすこともできますし、コミュニケーションクラスを追加することもできます。 IDは1度しか使用できないことに注意してください。最初の2つのdivの後で、ホバー効果は機能しなくなります。 – Lily

id = "squareone"を何度も使用すると、これをクラスに入れたり、セレクタのIDをそれぞれ与える：https：//www.w3.org/TR/css3-selectors/#selectors –

ロールオーバー時にgifが点滅する

答えて

関連する問題