jquery next()函数工作不正常
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");
});
相关文章:
- Javascript.getHours()工作不正常
- removeClass函数没有'工作不正常
- jQuery Ajax GET请求工作不正常
- Cordova ng路线工作不正常
- 更新属性工作不正常Meteor/MongoDB
- 为什么文本对齐:对;工作不正常
- Javascript作用域和Ajax调用;工作不正常
- JavaScript DOM insertBefore'工作不正常
- Angular Js布线工作不正常
- onmouseout函数工作不正常
- 承诺工作不正常
- JQuery.live()工作不正常
- Alloy UI文本区域工作不正常
- ng src工作不正常,但src工作正常
- Canvas.toDataUrl(“image/png”)工作不正常
- JQuery `length`属性工作不正常.为什么?
- Javascript setInterval工作不正常
- 我的Javascript代码没有'工作不正常
- 表单验证工作不正常,在不检查条目的情况下继续
- $localStorage array select with ng选项工作不正常