代码区项目交易流程

jquery next() function not working correctly


I have a css animation that does two things, one adds an opacity and two creates a slideUp animation when the user hovers on the specified area. I am having an issue with adding and removing the opacity. I am not sure where i have gone wrong. Below is a snippet of my code.

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; }

Problem courtesy of: NewKidOnTheBlock

Solution

As you ca see copy-bg is not the next element of box , it is a child

$(".box").hover(function(){ var $this = $(this); $this.children(".copy-bg").addClass("opacity"); }); $(".box").mouseleave(function(){ var $this = $(this); $this.children(".copy-bg").removeClass("opacity"); });

Solution courtesy of: Arun P Johny

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

点击收藏

LAST 奇舞周刊第290期(2019-01-04) Node.js C++ Addon应用实践 NEXT