Z-index 阻止了 gif 动画的运行 | Jquery CSS HTML JS [重复]
Posted
技术标签:
【中文标题】Z-index 阻止了 gif 动画的运行 | Jquery CSS HTML JS [重复]【英文标题】：Z-index blocks the functioning of the gif animation | Jquery CSS HTML JS [duplicate] 【发布时间】：2021-03-23 10:20:30 【问题描述】：我尝试使用 jquery.js 在图像块中创建悬停 gif 动画。
我在以三列网格排列的水平或垂直块中使用这些动画。 当您将鼠标悬停在块上时，将启动 gif，在混合模式下添加一个彩色表单，并在此 gif 上添加排版
在我的第一个示例中，一切正常，但是当我想将此代码添加到我的网站页面并更改 Z-index 以使这些元素不再重叠在我的 menu-wrapper 顶部时，gif 没有不再工作（第二个例子）。
第一个例子：
$(function ()
$(".playgif").hover(function ()
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
)
);.grille
position:relative;
margin-top: 120px;
z-index: 97;
width: 100%;
height: auto;
cursor: url(../images/mini-curseur.html), pointer;
.colonne1
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
.colonne2
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
.colonne3
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
.titre_vignette
font-family: 'Libre Baskerville', serif;
font-size:2vw;
.hover_vignettes
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
.hover_color
background:#FF0000;
background-blend-mode: difference;
.texte_vignette
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
.informations_vignette
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
.vignette_horizontale:hover .hover_vignettes
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
.vignette_horizontale:hover .texte_vignette
opacity:1;
margin-top:26%;
.vignette_horizontale:hover .informations_vignette
margin-top:0.5vw;
.hover_vignettes_vertical
z-index:90;
width:100%;
height:100%;
left:0;
right:0;
z-index:100;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
.texte_vignette_verticale
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
.vignette_verticale:hover .hover_vignettes_vertical
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
.vignette_verticale:hover .texte_vignette_verticale
opacity:1;
margin-top:55%;
.vignette_verticale:hover .informations_vignette
margin-top:0.5vw;
.vignette_horizontale
position:relative;
width:100%;
z-index:95;
opacity:1;
.vignette_horizontale img
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
.vignette_verticale
position:relative;
width:100%;
z-index:95;
opacity:1;
.vignette_verticale img
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
.description
height: 35px;
padding-top: 14px;
font-size: 15px;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="gif.js"></script>
<body>
<div id="contenant">
<div class="grille">
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
</div>
</body>第二个例子（已编辑）：
在第二个示例中，Snippet 版本可以正常工作，但在 my Website page...
我认为是通过更改 Z-index 值，它不再起作用了，但我真的找不到它是否真的如此。
$(function ()
$(".playgif").hover(function ()
var stat = $(this).find("img").attr("src");
$(this).find("img").attr("src", $(this).find("img").data("swap"));
$(this).find("img").data("swap", stat);
)
);#loader
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height:100vh;
position: fixed;
z-index:100;
background-color: #202020;
width: 100%;
body
height: auto;
width: 100%;
background: #fff;
h1
color: #fcfcfc;
font-size: 28px;
font-family: Gotham, Helvetica Neue, Helvetica, Arial," sans-serif";
.header_down
height: 120px;
position: fixed;
width: 100%;
background: #000;
top: 0;
z-index: 104;
transition: all 300ms ease-in-out;
.hide_header #header
opacity:0;
.grille
position:relative;
width: 100%;
height: auto;
z-index: 40;
.espacehaut
height: 120px;
z-index: 1;
.colonne1
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
.colonne2
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
.colonne3
height: auto;
position: relative;
width: 33.3333%;
float: left;
transition: all 250ms ease-out;
.titre_vignette
font-family: 'Libre Baskerville', serif;
font-size:2vw;
.hover_vignettes
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
.hover_color
background:#FF0000;
background-blend-mode: difference;
.texte_vignette
margin-top:30%;
opacity:0;
color:#FFF;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
.informations_vignette
font-size:1.3vw;
margin-top:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
.vignette_horizontale:hover .hover_vignettes
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
.vignette_horizontale:hover .texte_vignette
opacity:1;
margin-top:26%;
.vignette_horizontale:hover .informations_vignette
margin-top:0.5vw;
.hover_vignettes_vertical
z-index:100;
width:100%;
height:100%;
left:0;
right:0;
position: absolute;
margin: 0 auto;
opacity: 0;
text-align:center;
transform: opacity(0);
-webkit-transition: opacity 250ms ease-in-out;
transition:opacity 250ms ease-in-out;
.texte_vignette_verticale
margin-top:60%;
opacity:0;
color:#FFF;
font-size:1.5vw;
-webkit-transition: all 600ms ease-in-out;
transition: all 600ms ease-in-out;
.vignette_verticale:hover .hover_vignettes_vertical
opacity:0.8;
-ms-transform: opacity(0.8);
-webkit-transform: opacity(0.8);
transform: opacity(0.8);
.vignette_verticale:hover .texte_vignette_verticale
opacity:1;
margin-top:55%;
.vignette_verticale:hover .informations_vignette
margin-top:0.5vw;
.vignette_horizontale
z-index:95;
position:relative;
width:100%;
opacity:1;
.vignette_horizontale img
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
.vignette_verticale
z-index:95;
position:relative;
width:100%;
opacity:1;
.vignette_verticale img
position:relative;
width: 100%;
margin: 0 auto;
height: auto;
display:block;
#navigation-content
height: 100vh;
width: 100%;
position:fixed;
z-index: 111;
background-color:#020202;
transform: translateY(-200%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.menubar
position: absolute;
right:4%;
top: 40%;
cursor: pointer;
opacity: .8;
transition: all .4s ease;
.menubar span
position: relative;
background-color:transparent;
height:3px;
width: 20px;
display: block;
margin:6px;
border-radius: 20px;
.menubar .first-span
width:35px;
.menubar .first-span::before
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color: #fff;
transition: all .5s ease;
.menubar .second-span
width:35px;
.menubar .second-span::before
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
.menubar .third-span
width:35px;
.menubar .third-span::before
content: "";
position: absolute;
height: 120%;
width: 100%;
top:0;
right:0;
background-color:#fff;
transition: all .3s ease;
.menubar:hover .second-span::before , .menubar:hover .first-span::before , .menubar:hover .third-span::before
height: 100%;
.menubar:hover
opacity: 1;
.close-first , .close-second
height: 0px;
width: 35px;
background-color: #fff;
display: block;
margin: -2px;
cursor: pointer;
padding: 1px;
border-radius: 20px;
.close-first
transform: rotate(45deg);
.close-second
transform: rotate(-45deg);
.navigation-close
position: absolute;
top: 6%;
right:4%;
padding: 10px;
cursor: pointer;
transition: all.3s ease;
opacity: .8;
.navigation-close:hover
opacity: 1;
transform: rotate(90deg);
.logo a /* lookitsgraphic lorsque mernu ouvert */
position: absolute;
top: 3%;
left: 2.5%;
opacity: .8;
z-index: 2;
cursor: pointer;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
.logo a:hover
opacity: 1;
.header_down .logoInit /* lookitsgraphic fermé */
position: absolute;
top: 35%;
left: 2.5%;
opacity: .8;
transition: all .4s ease;
cursor : none;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 3px;
border: 5px solid #fcfcfc;
animation: glitch-middle 3s infinite;
@keyframes glitch-middle
0%,26%,30%,72%,76%,100% transform: translate(0em,0em) skew(0deg) ; box-shadow: none
30%,70% transform: translate(0em,0em) skew(30deg);
29%,31%,69%,71% transform: translate(0em,0em) skew(0deg);
28%,74% box-shadow:
-0.2em 0.1em 0 0 cyan,
0.2em -0.1em 0 0 magenta
.header_down .logoInit:hover
opacity: 1;
.social-media-links
width: 100%;
left: 0;
top: 23px;
position: absolute;
padding: 10px;
height: auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
.social-media
color: white;
width: 30px;
opacity: .8;
margin: 15px;
transition: all .4s ease;
.social-media:hover
opacity: 1;
transform: scale(1.5);
.navigation-links
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-family:poppins;
.navigation-links a
padding:10px;
text-decoration: none;
color: white;
font-size: 40px;
opacity: .7;
color: rgba(252, 252, 252, 0);
-webkit-text-stroke: 1px #fcfcfc;
transition: all .4s ease;
.navigation-links a:hover
opacity: 1;
color: rgba(252, 252, 252, 1);
-webkit-text-stroke: 0px;
.navigation-links a::before
content: "";
position: absolute;
top:50%;
left: 50%;
display: flex;
justify-content: center;
transform: translate(-50%,-50%);
align-items: center;
font-size: 9vw;
font-weight: 400;
font-family: monoton;
color:rgb(255, 255, 255,.1);
z-index: 1;
pointer-events: none;
opacity: 0;
letter-spacing: 100px;
transition: all .4s ease;
.navigation-links a:hover::before
content: attr(data-text);
opacity: 1;
letter-spacing: 10px;
/* transition */
#breaker
height: 300vh;
width: 120%;
background-color: #fff;
opacity: 1;
animation: breakeranimate 1.5s linear;
display: none;
transition: all .4s ease;
z-index: 10;
transform: rotate(15deg);
position: fixed;
transform : translateY(-100%);
@keyframes breakeranimate
0% transform : translateX(-150%) rotate(15deg) translateY(-50%);
50% transform : translateX(0%) rotate(15deg) translateY(-50%);
100% transform : translateX(150%) rotate(15deg) translateY(-50%);
@-webkit-keyframes breakeranimate
0% transform : translateX(-150%) rotate(15deg) translateY(-50%);
50% transform : translateX(0%) rotate(15deg) translateY(-50%);
100% transform : translateX(150%) rotate(15deg) translateY(-50%);
@keyframes scale
0%
transform: scale(.6);
100%
transform: scale(1);
@-webkit-keyframes breakeranimate
0%
transform: scale(.6);
100%
transform: scale(1);
.html
display: inline-block;
position: absolute;
left: 5%;
top:30%;
.cursor
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
mix-blend-mode:difference;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .5s ease;
.cursor-small
height: 50px;
width: 50px;
display: block;
border-radius: 50%;
border: 1px solid #fff;
background: #fff;
pointer-events: none;
position: fixed;
top: -25px;
left: -25px;
z-index: 999;
opacity: 1;
transition: scale .4s ease;
.icon
height:40px;
opacity: .8;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<body>
<div id="all">
<div class="cursor"></div>
<!--loader-->
<!-- <div id="loader">
<img src="src/img/logo.png">
</div> -->
<!--chargement-->
<div id="breaker"> </div>
<div id="breaker-two"> </div>
<!--Navigation- ouverture-->
<div id="navigation-content">
<div class="logo">
<h1>
<a id="name">lookitsgraphic</a>
</h1>
</div>
<div class="navigation-close">
<span class="close-first"></span>
<span class="close-second"></span>
</div>
<div class="navigation-links">
<a href="javascript:setTimeout(()=>window.location = 'index.html' ,800);" data-text="HOME" id="home-link" >HOME</a>
<a href="javascript:setTimeout(()=>window.location = 'aboutMe.html' ,800);" data-text="ABOUT" id="about-link" >ABOUT</a>
<a href="javascript:setTimeout(()=>window.location = 'projects.html' ,800);" data-text="PROJECTS" id="projects-link" >PROJECTS</a>
<a href="javascript:setTimeout(()=>window.location = 'portfolio.html' ,800);" data-text="PORTFOLIO" id="portfolio-link" >PORTFOLIO</a>
<a href="javascript:setTimeout(()=>window.location = 'contact.html' ,800);" data-text="CONTACT" id="contact-link" >CONTACT</a>
</div>
</div>
<header class="header_down">
<!--div-->
<h1><a class="logoInit" >lookitsgraphic</a>
</h1>
<div class="social-media-links">
<a href="#/" target="_blank">
<img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" >
</a>
<a href="Tel: #">
<img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" >
</a>
<a href="mailto: #" target="_top">
<img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" >
</a>
<a href="#">
<img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" >
</a>
</div>
<div class="menubar">
<span class="first-span"></span>
<span class="second-span"></span>
<span class="third-span"></span>
</div>
<!--Header Fin-->
</header>
<!--GRILLE-->
<div class="grille">
<div class= "espacehaut"> </div>
<div class="colonne1">
<a class="playgif" href="test.html">
<div class="vignette_verticale">
<div class="hover_vignettes_vertical hover_color">
<div class="texte_vignette_verticale">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vertical_vignette.png">
</div>
</a>
</div>
<div class="colonne2">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div id="anim1" class="hover_vignettes hover_color">
<div id="anim1" class="texte_vignette">
<div id="anim1" class="titre_vignette">TEST</div>
<div id="anim1" class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
<div class="colonne3">
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum</br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
<a class="playgif" href="test.html">
<div class="vignette_horizontale">
<div class="hover_vignettes hover_color">
<div class="texte_vignette">
<div class="titre_vignette">TEST</div>
<div class="informations_vignette">
lorem ipsum </br>
</div>
</div>
</div>
<img data-swap="https://lookitsgraphic.com/src/img/portfolio/vignette.gif" src="https://lookitsgraphic.com/src/img/portfolio/vignette.png">
</div>
</a>
</div>
</div>
<!--ALL Fin-->
</div>
<!--Scripts-->
</div>
</body>My Website page 带有不起作用的 gif。
如果有人知道在哪里解决这个问题。
感谢您对此事的考虑。
【问题讨论】：
老兄，你的网站是艺术品 哈哈，一大堆糟糕的代码 gif 是什么？当我悬停说右上角的方形项目时，它变红了，我应该在看什么？ @PowerGlove 当您将鼠标悬停在每个“测试”图像上时，会出现一个不透明的红色方块，并且在 gif 图像下方是动画的。使用 sn-p，您有时必须在它加载时停留一段时间。 @Lookitsgraphic 如果你在你的网站上查看你的开发控制台，你会看到$ is not defined的错误你需要把你的jquery.js放在之前你的gif.js - 更改这些脚本的顺序，它很可能会起作用。
【参考方案1】：
正如 @disinfor 在 cmets 中所说，控制台中有消息 $ is not defined。
我不得不更改脚本jquery.js 和gif.js 的顺序，一切正常。
【讨论】：
以上是关于Z-index 阻止了 gif 动画的运行 | Jquery CSS HTML JS [重复]的主要内容，如果未能解决你的问题，请参考以下文章