jQuery不适用于100vh的容器

Question

I'm trying to make my entire container( mainContainer , containing a 100vh full screen video and a text overlay) to the left using a click on a div class( next hvr-forward ) using jquery.

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

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

Used the code above but its not working. Have tested it with css:borders so it is not a jquery problem.

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;
}

Also have used Inspector but it seems my mainContainer is not moving. Are there any other ways to move the entire container to the left upon a mouse click like a slider?

Answer 1

It would not animate because of the fixed property you gave to the video and .text elements.

Changing the mainContainer to relative and the sub elements to absolute (and some other small things, which you can see in the snippet), it works.

Hope it helps!

 $('.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>