[英]jquery next() function not working correctly
我有一個css動畫做兩件事,一個添加不透明度,兩個用戶在用戶盤旋在指定區域時創建一個slideUp動畫。 我在添加和刪除不透明度時遇到問題。 我不知道我哪里出錯了。 下面是我的代碼片段。
HTML
<body id="body" class="preload">
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay animated">
<h1>box 1</h1>
</div>
</div>
<div class="box">
<div class="trigger">hhh</div>
<div class="overlay animated">
<h1>box 1</h1>
</div>
</div>
JS
<script type="text/javascript">
$("window").load(function(){
$("#body").removeClass("preload");
});
$(".trigger").hover(function(){
var $this = $(this);
$this.next(".overlay").removeClass("fadeInDown", 1000).addClass("fadeInUp", 1000);
});
$(".trigger").mouseleave(function(){
var $this = $(this);
$this.next(".overlay").removeClass("fadeInUp", 1000).addClass("fadeInDown", 1000);
});
$(".box").hover(function(){
var $this = $(this);
$this.next(".copy-bg").addClass("opacity");
});
$(".box").mouseleave(function(){
var $this = $(this);
$this.next(".copy-bg").removeClass("opacity");
});
</script>
CSS
.trigger{
width:100%; height: 100%;
position: relative;
}
.box{
width: 300px; height: 300px;
background: red;
@include inline-block;
margin: 0 2px;
position: relative;
overflow: hidden;
}
.overlay{
height: 100%; width: 100%;
bottom: -200px;
position: absolute;
h1{
color: #fff;
}
}
.copy-bg{
@include opacity(0.50);
width: 100%; height: 100%;
background: #000;
position: absolute;
display: none;
}
.opacity{
display: block;
}
.copy{
position: absolute;
top: 0;
}
.animated{
@include transition-duration(1s ease);
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
}
.animated.hinge{
@include transition-duration(1s);
}
.fadeInUp{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
display: block;
}
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}@-webkit-keyframes fadeInUp {
0% {
opacity: 1;
-webkit-transform: translateY(0);
} 100% {
opacity: 1;
-webkit-transform: translateY(-200px);
}
}
@-moz-keyframes fadeInUp {
0% {
opacity: 1;
-moz-transform: translateY(20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInUp {
0% {
opacity: 1;
-o-transform: translateY(20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInUp {
-webkit-animation-name: fadeInUp;
-moz-animation-name: fadeInUp;
-o-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@-webkit-keyframes fadeInDown {
0% {
opacity: 1;
-webkit-transform: translateY(-200px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
}
}
@-moz-keyframes fadeInDown {
0% {
opacity: 0;
-moz-transform: translateY(-20px);
}
100% {
opacity: 1;
-moz-transform: translateY(0);
}
}
@-o-keyframes fadeInDown {
0% {
opacity: 0;
-o-transform: translateY(-20px);
}
100% {
opacity: 1;
-o-transform: translateY(0);
}
}
@keyframes fadeInDown {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fadeInDown {
-webkit-animation-name: fadeInDown;
-moz-animation-name: fadeInDown;
-o-animation-name: fadeInDown;
animation-name: fadeInDown;
}
你可以看到copy-bg
不是box
的下一個元素,它是一個孩子
$(".box").hover(function(){
var $this = $(this);
$this.children(".copy-bg").addClass("opacity");
});
$(".box").mouseleave(function(){
var $this = $(this);
$this.children(".copy-bg").removeClass("opacity");
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.