javascript - Z-index 阻止了 gif 动画的运行 | jQuery CSS HTML JS
问题描述
我尝试使用 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>第二个例子（已编辑）：
在第二个示例中，片段版本可以正常工作，但不能在我的网站页面中...
我认为是通过更改 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" alt="logo">lookitsgraphic</a>
</h1>
<div class="social-media-links">
<a href="#/" target="_blank">
<img src="https://lookitsgraphic.com/src/picto/Instagram.png" class="social-media" alt="instagram-logo">
</a>
<a href="Tel: #">
<img src="https://lookitsgraphic.com/src/picto/Phone.png" class="social-media" alt="phone-logo">
</a>
<a href="mailto: #" target="_top">
<img src="https://lookitsgraphic.com/src/picto/Mail.png" class="social-media" alt="mail-logo">
</a>
<a href="#">
<img src="https://lookitsgraphic.com/src/picto/Eye.png" class="social-media" alt="eye-logo">
</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>带有 gif 的我的网站页面不起作用。
如果有人知道在哪里解决这个问题。
感谢您对此事的考虑。
解决方案
正如@disinfor在评论中所说，$ is not defined控制台中有消息。我不得不更改脚本的顺序，jquery.js并且gif.js一切正常。
推荐阅读
- regex - 使用 VBA 将数据导入 Access
- android - Android Oreo 中所有应用的通知设置活动
- java - 从 birt 模板以编程方式生成 .csv 文件
- r - 根据指标添加反向索引
- web - 与 twilio 共享屏幕，无需扩展
- vba - Using a code used to get a range with a different column
- javascript - 如何提交 php 表单和弹出 javascript 的值？
- parallel-processing - 如何让操作系统在不同的处理器内核上运行多个“分叉”进程？
- php - 无法安装 TastyIgniter
- oop - Create complex class with factory and builder