Question

目前，.div1在视频框底部上方浮动50px。当.div2（控件栏）消失时，我希望.div1向下移动并坚持到新的底部。

就像Netflix的视频播放器处理字幕一样，当控制栏消失时，字幕应该“拉”到底部。这就是我要找的。 Test

body {
  background-color: gray;
  margin: 0 auto;
}
.out {
  width: 1000px;
  position: relative;
  height: 560px;
  background-color: #000;
  left: 50%;
  margin-left: -500px;
  top: 50%;
  margin-top: -280px;
}
.div1 {
  width: 100%;
  height: 50px;
  background-color: red;
  position: absolute;
  bottom: 50px;
}
.div2 {
  width: 100%;
  height: 50px;
  background-color: blue;
  position: absolute;
  bottom: 0;
}

<div class="out">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

Answer 1

通过切换蓝色div的可见性，您还可以更改css bottom来回移动。我已经按下一个按钮来触发事件，你可以使用任何东西（悬停东西，点击别的东西等）。

var flip = 0;
$('#btnChange').on('click',function(){
    $('.div2').toggle(0,function(){
        if(flip++ % 2 === 0){
            $('.div1').css("bottom", "0px");
        } else{
            $('.div1').css("bottom", "50px");
        }
    });
});

http://jsfiddle.net/acsvrzLf/

Answer 2

在jQuery中，那将是：

$(".out").find(".div2").hide().end().find(".div1").css({"bottom": "0px"});

一旦包含jQuery，它就适用于您的测试页。

当底部div消失时，将顶部div向下拉到底部

2 个答案: