jQuery不適用於100vh的容器

Question

我試圖通過使用jQuery在div類（ next hvr-forward ）上單擊，使我的整個容器（ mainContainer ，包含一個100vh的全屏視頻和一個文本疊加層）在左側。

https://jsfiddle.net/Lo7xto2t/6/

$('.next').click(function() {$('.mainContainer').animate({"margin-right": '-=200'});});

使用了上面的代碼，但無法正常工作。 已經使用css：borders測試了它，所以這不是jquery的問題。

HTML：

<div class = "mainContainer">
    <video poster ="poster.png" autoplay loop>
        <source src ="images/video.mp4" type ="video/mp4">
        <source src ="video.webm" type ="video/webm">   
    </video>
    <div class = "overlayAll">
        <div class = "text"> 
            We are BLXCK Co.
        </div>
    </div>
</div>

CSS：

video {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
background: transparent;
background-size: cover;
}
.mainContainer{
height: 100vh;
position: absolute;
opacity: 1;
}
.overlayAll {
z-index: 1;
position: absolute;
background: rgba(0,0,0,0.3);
top: 0;
bottom: 0;
left: 0;
right: 0;    
height: 120vh;
}
.text {
position: fixed;
max-width: 50vw;
min-width: 50vw;
top: 30vh;
bottom: 30vh;
left: 15vw;
color: white;
font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif;
font-size: 12vw;
display: flex;
line-height: 0.8em;
flex-direction: column;
justify-content: center;
align-items: center;
}

也使用過Inspector，但似乎我的mainContainer沒動。 還有其他方法可以將整個容器向左移動，就像單擊滑塊一樣。

Answer 1

由於您賦予了video和.text元素fixed屬性，因此無法設置動畫。

將mainContainer更改為relative ，將sub元素更改為absolute （以及一些其他小內容，您可以在代碼段中看到），可以正常工作。

希望能幫助到你！

 $('.next').click(function() { $('.mainContainer').animate({ right: '+=100vw' }, 2000); }); 

 video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: 1; background: transparent; background-size: cover; } .mainContainer{ height: 100vh; max-height: 100vh; max-width: 100vw; position: relative; opacity: 1; right: 0; overflow: hidden; } .overlayAll { z-index: 1; position: absolute; background: rgba(0,0,0,0.3); top: 0; bottom: 0; left: 0; right: 0; height: 100vh; } .text { position: absolute; max-width: 50vw; min-width: 50vw; top: 30vh; bottom: 30vh; left: 15vw; color: white; font-family: "HelveticaNeue-Bold", Helvetica, Arial, sans-serif; font-size: 12vw; display: flex; line-height: 0.8em; flex-direction: column; justify-content: center; align-items: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class = "mainContainer"> <video poster ="poster.png" autoplay loop> <source src ="http://techslides.com/demos/sample-videos/small.mp4" type ="video/mp4"> <source src ="http://techslides.com/demos/sample-videos/small.webm" type ="video/webm"> </video> <div class = "overlayAll"> <div class = "text next"> We are BLXCK Co. </div> </div> </div>