Css轉換不響應

我的css轉換不起作用。我無法弄清楚問題所在。我正在使用JavaScript添加類。元素不會改變顯示。這裏是我的代碼和我的codepen的鏈接。我正在嘗試爲一個tic tac toe遊戲製作一個簡單的模式。謝謝你的幫助！Css轉換不響應

.back { 
    margin-top: 200px; 
} 

.box { 
    display: inline-block; 
    vertical-align:top; 
    background: lightgray; 
    width: 120px; 
    height: 120px; 
    margin: 2px 0 2px 0; 
    border-radius: 20px; 
} 

h1 { 
    margin-top: 30px; 
    font-weight: bold; 
    font-size: 4em; 
} 

.popup { 
    font-family: 'Signika', 'sans-serif'; 
    margin: 200px auto 0 auto; 
    width: 700px; 
    height: 270px; 
    background: skyblue; 
    border: 6px solid #8dadc3; 
    box-shadow: 0px 0px 300px 700px rgba(177, 217, 244, 0.9); 
    border-radius: 40px; 
    position: relative; 
    z-index: 1; 
    visibility: visible; 
    opacity: 1; 
    transition: all 5s; 
} 

.popup h4 { 
    padding-top: 60px; 
    font-weight: bold; 
    font-size: 3em; 
    left: 10%; 
    position: absolute; 
} 

.x { 
    margin-top: 130px; 
    position: absolute; 
    border: 4px solid #8dadc3; 
    left: 40%; 
} 

.o { 
    margin-top: 130px; 
    position: absolute; 
    border: 4px solid #8dadc3; 
    left: 50%; 
} 

.popup.hide { 
    opacity: 0; 
    visibility: hidden; 
}

這是我的JavaScript：

$(document).ready(function(){ 
    var chosen; 
    $('.player').on("click", function(e){ 
    if($(this).hasClass("x")){ 
     console.log("X"); 
     chosen = "X" 
    } else { 
     console.log("O"); 
     chosen = "O"; 
    } 
    $('.popup').addClass('hide'); 
    }); 
});

鏈接codepen：

Direct link to code

來源

2016-05-17 Cesar Rodas

嘗試使用「$（'。popup'）。fadeOut（500）」 –