0

我有一个 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;
  }
4

1 回答 1

2

如您所见，它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");
        });
于 2013-08-28T11:31:59.393 回答