Question

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

我基本上有两个漂浮的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;
}

动画管理他们的动作：

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

左浮动元素存在问题。你看，正确的一个以一个平滑的动作从页面向右移动（图像和所有）。然而，左边的只是“被遮盖”，实际上并没有“滑出”页面。

有人熟悉这个吗？无论如何都要让左边的元素正确滑出页面吗？

Answer 1

右门的背景图像可以工作，因为浮动使门在门的宽度缩小时向右移动。背景图像只是为了骑行。

左门的背景图像不正常工作，因为当门宽度缩小时门不会向左移动。

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

您可以通过删除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>

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

1 个答案: