jQuery動畫後CSS轉換不工作？

好吧，我有三個泡泡形式的div。現在我只是在第一個工作。點擊時它們應該會爆炸，佔據幾乎所有的屏幕，然後在點擊標題時回到原來的泡泡。下面的代碼 - 如果你運行它，這件事會更容易解釋：jQuery動畫後CSS轉換不工作？

<!DOCTYPE html> 
<html> 
    <head> 
     <title>KURB - Home</title> 
     <link rel="stylesheet" type="text/css" href="kurb.css"/> 
     <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </head> 
    <body> 
     <div id="main"> 
      <p id="k">KURB</p> 
     </div> 
     <div id="about"> 
      <p class="label">Blah blah blah</p> 
     </div> 
     <div id="work"> 
      <p class="label">Blah blah blah</p> 
     </div> 
     <div id="contact"> 
      <p class="label">Blah blah blah</p> 
     </div> 

     <script type="text/javascript"> 
      var main = $("#main"); 
      var about = $("#about"); 
      var work = $("#work"); 
      var contact = $("#contact"); 

      var open = false; 

      about.click(function() { 
       about.animate({ 
        height: "100vh", 
        marginTop: "0vh", 
        width: "100%", 
        marginLeft: "0%", 
        borderRadius: "0", 
        opacity: "1" 
       }, 300); 

       main.animate({ 
        marginTop: "1vh" 
       }, 300); 

       about.css("cursor", "auto"); 
       work.css("display", "none"); 
       contact.css("display", "none"); 
       main.css("cursor", "pointer"); 

       open=true; 
      }); 

      main.click(function() { 
       if (open = true) { 
        work.css("display", "inline"); 
        contact.css("display", "inline"); 
        main.css("cursor", "auto"); 

        about.animate({ 
         width: "38%", 
         marginLeft: "31%", 
         height: "30vh", 
         marginTop: "7vh", 
         borderRadius: "100%", 
         opacity: "0.6" 
        }, 300); 

        main.animate({ 
         marginTop: "10vh" 
        }, 300); 

        about.css("cursor", "pointer"); 

        open=false; 
       } 
      }); 
     </script> 
    </body> 
</html>

CSS：

body { 
    overflow: hidden; 
} 

#main { 
    float: left; 
    width: 20%; 
    height: 10vh; 
    margin-top: 10vh; 
    margin-left: 40%; 
    text-align: center; 
} 

#k { 
    font-family: Questrial; 
    font-size: 70px; 
    margin-top: -7px; 
    margin-left: -2px; 
    color: #404040; 
    border-bottom: 2px solid #404040; 
    line-height: 0.85; 
} 

#about { 
    float: left; 
    clear: both; 
    width: 38%; 
    height: 30vh; 
    margin-top: 7vh; 
    margin-left: 31%; 
    text-align: center; 
    background-color: #33CC33; 
    border-radius: 100%; 
    opacity: 0.6; 
    transition: opacity .5s, margin-top .5s, margin-bottom .5s; 
    -webkit-transition: opacity .5s, margin-top .5s, margin-bottom .5s; 
    cursor: pointer; 
} 

#about:hover { 
    opacity: 0.8; 
    margin-top: 5vh; 
    margin-bottom: 2vh; 
} 

#work { 
    float: left; 
    width: 38%; 
    height: 30vh; 
    margin-top: 0vh; 
    margin-left: 10%; 
    text-align: center; 
    background-color: #323280; 
    border-radius: 100%; 
    opacity: 0.6; 
    transition: opacity .5s, margin-top .5s; 
    -webkit-transition: opacity .5s, margin-top .5s; 
    cursor: pointer; 
} 

#work:hover { 
    opacity: 0.8; 
    margin-top: -2vh; 
} 

#contact { 
    float: right; 
    width: 38%; 
    height: 30vh; 
    margin-top: 0vh; 
    margin-right: 10%; 
    text-align: center; 
    background-color: #FF6600; 
    border-radius: 100%; 
    opacity: 0.6; 
    transition: opacity .5s, margin-top .5s; 
    -webkit-transition: opacity .5s, margin-top .5s; 
    cursor: pointer; 
} 

#contact:hover { 
    opacity: 0.8; 
    margin-top: -2vh; 
} 

.label { 
    font-family: Questrial; 
    color: white; 
    font-size: 35px; 
    margin-top: 80px; 
}

現在我已經能夠做到這一切。問題是，之後，應該改變不透明度和margin-top/margin-bottom的CSS轉換似乎不起作用。不透明度根本不會改變，div不會向上移動 - 底部的兩個div會向下移動。我不知道爲什麼，但我懷疑這是因爲我在某種程度上用jQuery動畫搞砸了它。我注意到，當div完整大小時，CSS轉換被停用。也許他們保持停用狀態？ ... 幫幫我？

來源

2015-07-22 Tommay

在main.click（）函數中，if語句有錯誤。它應該是'if（open === true）{'如果與真實比較。它不能解決你的問題，但我希望它有助於調試:) – Danoram

試試這個：

transition: opacity .5s, margin-top .5s !important;

把!important關鍵字在你的樣式屬性的結束和你做任何的jQuery相關的東西

我也建議你作一個功能後，它應該工作的是在兩個點擊事件之間執行任何通用功能。添加一些參數（如動畫元素和動畫參數）並使用它們提供動畫信息：

func animateElement(elementToAnimate, height, width //etc { 

elementToAnimate.animate({ 
        height: height, 
        marginTop: "0vh", 
        width: width, 
        marginLeft: "0%", 
        borderRadius: "0", 
        opacity: "1" 
       }, 300); 

}

來源

2015-07-22 01:11:23

這工作。現在的問題是div是全尺寸的，如果你將鼠標移出，它會移動。有沒有解決這個問題，或者我將不得不刪除：使用jQuery懸停CSS？這甚至有可能嗎？ – Tommay

@Tommay嗯，給我一秒鐘來看看並認爲 –

也許答案是做一個完全不同的id與原始id相同的特徵，除非沒有：懸停的東西？看起來像這樣會變得非常惱人...... – Tommay

jQuery動畫後CSS轉換不工作？

回答

相關問題