未加星标

jquery next() function not working correctly

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

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教程

代码区博客精选文章
分页:12
转载请注明
本文标题:jquery next() function not working correctly
本站链接:https://www.codesec.net/view/628476.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(186)