如何使用JavaScript刪除瓷磚（Metro UI CSS）的縮放效果

Question

我創建了一個tile（metro ui css），該tile會執行以下操作：

• 單擊后播放視頻。
• 右滑效果不顯示（單擊）。

我無法刪除圖塊的縮放效果。我已嘗試刪除圖塊類，但無法正常工作。單擊圖塊后，請幫助我刪除縮放效果。這是代碼。

的HTML

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tile" id="vii">
<div class="tile-content slide-right" >
        <div class="slide slide1">
            <video id="myvideo" controls muted>
                <source src="1.mp4" type="video/mp4" />
            </video>
        </div>
    <div class="slide-over slide-over1" id="viii">
         Attack by Smit
    </div>
</div>
</div>
</div>
</div>
</div>

的JavaScript

var myvideo = document.getElementById("myvideo");
var myaudio = document.getElementById("myaudio");
document.getElementById("vii").onclick=function(){
myvideo.play();
myvideo.style.display="block";
myvideo.style.width="600px";
myvideo.style.height="300px";
document.getElementById("viii").style.display="none";
}

這是代碼片段：

http://jsbin.com/tujakasuci/1/edit?html，輸出

謝謝！！

Answer 1

您應該OnClick，刪除slide-right類。 縮放效果來自此類：

document.getElementById("vii").onclick=function(){
    $('.tile-content').removeClass("slide-right");
    myvideo.play();
    myvideo.style.display="block";
    myvideo.style.width="600px";
    myvideo.style.height="300px";
    document.getElementById("viii").style.display="none";
}