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）” –