Question

我尝试使用css关键帧在页面加载时显示div，以便将div从0设置为0.7。然后，我希望用户能够将鼠标悬停在此div上，并使其不透明度从0.7到1动画，并在鼠标离开时返回0.7。动画上的鼠标正由我的jquery代码处理。问题是，似乎我只能拥有一个或另一个。这可能吗？

HTML

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="Test Web Site 1 Style Sheet.css"></link>
        <link type="text/css" rel="stylesheet" href="animate.css"></link>
        <script src="jquery-1.11.2.min.js"></script>
        <script src="Test Web Site 1.js"></script>
        <title>Test</title>
    </head>
    <body id = "main">
        <div class = "titleBar animated fadeInTranslucent">
            <p class = "title">Title</p>
        </div>
    </body>
</html>

CSS

body {
  background: url('images/Background Official.jpg') no-repeat center center fixed;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  -o-background-size: 100% 100%;
  background-size: 100% 100%;
  overflow-x: hidden;
}

.title {
  font-family: monospace;
  font-size: 50pt;
  color: #FFFFFF;
  z-index: 2;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  letter-spacing: 2px;
}

.titleBar {
  height: 9%;
  width: 34%;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
  background-color: #000000;
  opacity: 0.7;
  z-index: 1;
  top: 50%;
  left: 50%;
  margin-top: -42.5px;
  margin-left: -310px;
  text-align: center;
  display: table;
  position: absolute;
  cursor: pointer;
}

@-webkit-keyframes fadeInTranslucent {
  0% {opacity: 0;}
  100% {opacity: 0.7;}
}

@keyframes fadeInTranslucent {
  0% {opacity: 0;}
  100% {opacity: 0.7;}
}

.fadeInTranslucent {
    -webkit-animation-name: fadeInTranslucent;
    animation-name: fadeInTranslucent;
}

animate.css摘录（解释动画类）

.animated {
  -webkit-animation-duration: .5s;
          animation-duration: .5s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

的jQuery

$(document).ready(function(){
    $(".titleBar").mouseenter(function(){
        $(".titleBar").stop().animate({opacity:1},400);
    });
    $(".titleBar").mouseleave(function(){
        $(".titleBar").stop().animate({opacity:0.7},400);
    });
});

在div class =＆＃34; titleBar animated fadeInTranslucent＆＃34;我的代码的一部分，如果您删除＆＃34;动画＆＃34;和＆＃34; fadeInTranslucent＆＃34;类，jQuery部分工作。否则，jQuery没有响应，关键帧也可以工作。

Answer 1

.fadeInTranslucent {
 animation-name: fadeInTranslucent;
 -webkit-animation-name: fadeInTranslucent;
 -moz-animation-name: fadeInTranslucent;
 animation-duration: 2s;
 -webkit-animation-duration: 2s;
 -moz-animation-duration: 2s;
 animation-iteration-count: 1;
 -webkit-animation-iteration-count: 1;
 -moz-animation-iteration-count: 1;
}

http://plnkr.co/edit/uFJbT8QbDf0q6fZcnJIV?p=preview

Answer 2

这些课程名称之前你不需要句号吗？像这样：

@-webkit-keyframes .fadeInTranslucent {
  0% {opacity: 0;}
  100% {opacity: 0.7;}
}

@keyframes .fadeInTranslucent {
  0% {opacity: 0;}
  100% {opacity: 0.7;}
}

Answer 3

检查要在JQuery ready函数中完成的类的动画，并从div中删除animate类

$(document).ready(function(){
    $( ".titleBar" ).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
        $(".titleBar").removeClass('animated fadeInTranslucent');   

    });
    $(".titleBar").mouseenter(function(){
        $(".titleBar").stop().animate({opacity:1},400);
    });
    $(".titleBar").mouseleave(function(){
        $(".titleBar").stop().animate({opacity:0.7},400);
    });
});

使用css关键帧动画后如何使用jquery重新生成div

3 个答案: