Javascript 如何在使用css关键帧动画后使用jquery重新激活div

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

HTML

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

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=“titleBar animated fadeInTranslucent”部分中，如果删除“animated”和“fadeInTranslucent”类，jQuery部分可以工作。否则，jQuery是非响应的，关键帧工作。

在这些类名之前不需要句点吗？像这样：

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

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

---

检查要在jqueryready函数中完成的类上的动画，并从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);
    });
});

---

显然不是这样，因为没有它们它也能正常工作。我不是专家，但在我的电脑里没有它也能用，而著名的animate.css也没有。问题是让jquery和css关键帧都与一个div一起工作，也许我应该问你使用哪种broser？@micha我使用Firefox不要紧，我是个白痴。我复制/粘贴了所有三个文档的全部内容，效果很好！谢谢你的时间和帮助！除了您的更改之外，我还发现我必须从分配给div的类中删除.animated类。因此div的类部分应仅为：class=“titleBar fadeInTranslucent”

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

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

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

$(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);
    });
});

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