javascript - 左浮动元素与右浮动元素的滑动动画

Question

我遇到了 jQuery 中滑动动画不一致的问题，我不太确定如何克服它。

我基本上有两个 float div 充当打开和关闭门的作用:

.door-one{
    float: left;
    width: 50%;
    height: 100%;
    background-image: url('dark-wood.png');
    box-shadow: inset 0 0 10px black;
}

.door-two{
    float: right;
    width: 50%;
    height: 100%;
    background-image: url('dark-wood.png');
    box-shadow: inset 0 0 10px black;
}

以及控制其 Action 的动画:

$(document).ready(function(){
    $('.home-button').click(function(){
        $('.door-one').animate({width: 'toggle'}, 1000);
        $('.door-two').animate({width: 'toggle'}, 1000);
    });
});

左侧 float 元素存在问题。您会看到，右侧的一个以一种平滑的 Action 从页面向右移动(图像和所有内容)。然而，左边的只是被“覆盖”起来，实际上并没有“滑”出页面。

有人熟悉这个吗？有没有办法让左侧元素正确滑出页面？

Answer 1

右门的背景图像有效，因为 float 导致它随着门宽度的缩小而向右移动。背景图像只是随波逐流。

左门的背景图像不起作用，因为门在宽度缩小时不会向左移动。

另一种方法是为左门的位置设置动画，而不是其宽度。

您可以通过删除 float: left 并为左门添加绝对定位来实现此目的。我认为您不能为此目的向左切换。但您可以根据其当前偏移量向一个方向或另一个方向设置动画。

片段:

$('.home-button').click(function(){
  var d1= $('.door-one');
  if(d1.offset().left < 0) {
    d1.animate({left: '0'}, 1000);
  }
  else {
    d1.animate({left: '-50%'}, 1000);
  }
  $('.door-two').animate({width: 'toggle'}, 1000);
});

html,body {
  width: 100%;
  height: 100%;
  margin: 0px;
}

.door-one{
  position: absolute;
  width: 50%;
  height: 100%;
  background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
  box-shadow: inset 0 0 10px black;
}

.door-two{
  float: right;
  width: 50%;
  height: 100%;
  background-image: url("http://www.iconsdb.com/icons/preview/royal-blue/stackoverflow-4-xxl.png");
  box-shadow: inset 0 0 10px black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="home-button">Click me</button>
<hr>
<div class="door-one"></div>
<div class="door-two"></div>