0
У меня возникли проблемы с поиском решения для исправления мерцания, которое возникает, когда я наводил курсор на этот div, чтобы отобразить gif. HERE - пример того, о чем я говорю.Мерцание gif при опрокидывании div
Код работает отлично с jpgs ... но не с gif. Я не думаю, что это проблема перекрытия или предварительной загрузки.
Я также заметил, что первые 3 divs не мерцают при паре. Проблема возникает только после третьего 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 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 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­tween Boul­ders</span><span id="date">2015 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­cker Ton­ic</span><span id="date">2015 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 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 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 with <a href"https://slumdiscs.bandcamp.com/merch/slumdiscs-01">Slum­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 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­king Light</span><span id="date">2014 </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>
не удается воспроизвести его на своей машине. может быть, это хорошая идея, чтобы поджать ваше GIF перед отображением. – roNn23