Question

我试图通过点击div类（mainContainer {{来创建我的整个容器（next，包含100vh全屏视频和文本覆盖）到左侧1}}）使用jquery。

hvr-forward

使用上面的代码，但它不起作用。已经使用css：border进行了测试，因此它不是一个jquery问题。

HTML：

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

CSS：

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

也使用了Inspector但似乎我的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; }没有移动。有没有其他方法可以像滑块一样点击鼠标左移整个容器？</ p>

Answer 1

由于您为fixed和video元素提供的.text属性，因此无法设置动画。

将mainContainer更改为relative，将子元素更改为absolute（以及其他一些小内容，您可以在代码段中看到），它可以正常工作。

希望它有所帮助！

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

JQuery不适用于100vh的容器

1 个答案: