如何在使用css關鍵幀動畫後使用jquery重新創建div

我想要在使用css關鍵幀加載頁面時在div上顯示div，以便將div從0改爲0.7。然後，我希望用戶能夠將鼠標懸停在該div上，並將其不透明度從0.7降至1，並在鼠標懸停時將其降至0.7。我的jquery代碼正在處理動畫上方的鼠標。問題是，似乎我只能擁有一個或另一個。這可能嗎？如何在使用css關鍵幀動畫後使用jquery重新創建div

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 =「titleBar animated fadeInTranslucent」部分，如果刪除了「動畫」和「fadeInTranslucent」類，則jQuery部分可以工作。否則，jQuery不響應，關鍵幀工作。

來源

2015-01-26 trunks470

也許我應該刪除動畫類問你使用哪個broser？ – micha 2015-01-26 23:30:52

@micha我使用firefox – trunks470 2015-01-26 23:33:01

.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

來源

2015-01-26 23:26:26 micha

沒關係，我是個白癡。我複製/粘貼了所有三個文檔的全部，它的工作！感謝您的時間和幫助！ – trunks470 2015-01-26 23:38:54

除了您的更改之外，我還發現必須從分配給div的類中刪除.animated類。所以div的class部分應該只讀：class =「titleBar fadeInTranslucent」 – trunks470 2015-01-27 00:54:46

你是否需要在這些類名前加上句號？像這樣：

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

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

來源

2015-01-26 23:15:09

顯然不是因爲它沒有它們正常工作。我不是專家，但它在我的工作沒有它，着名的animate.css也沒有它。問題是越來越jQuery和css關鍵幀都與一個div工作 – trunks470 2015-01-26 23:19:59

檢查類上的動畫你JQuery的準備函數來完成，並從DIV

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

來源

2015-01-26 23:23:05 Steve

如何在使用css關鍵幀動畫後使用jquery重新創建div

回答

相關問題