动画隐藏 2 个并排 div 中的一个会给另一个 div 带来生涩的动作

Question

我有 2 个div 并排放置。使用 jQueryUI，我使用幻灯片动画隐藏其中一个div，但另一个div 在没有动画的情况下会调整大小。单击按钮会隐藏右侧div，但左侧div 不会显示动画。

编辑：单击按钮时，右侧（蓝色）div 会动画并向右隐藏。但是左（黄色）div 不会改变大小。然后，它将重置为 100% 宽度，没有任何滑动动画。显示右div 时发生反向情况。我需要的是左div 动画与右div 的动画一起调整大小。

有没有办法也给调整动画大小？.HTML：

<div class="right">right content</div>
<div class="left">
  left content
  <button onclick="toggle()">Click Me</button>
</div>

.JS：

function toggle() {
  if($(".right").is(":visible")) {
            $('.right').hide("slide", {
                direction : "right"
            }, 500);
  } else {
            $('.right').show("slide", {
                direction : "right"
            }, 500);
  }
}

代码笔链接：http://codepen.io/anon/pen/aNaNpe

Answer 1

试试这个

.left {
height: 100%;
float: none; 
overflow: hidden;
position:fixed;
}

和

$(".left").css("width","100%");
$(".right").hide();
function toggle() {
  if($(".right").is(":visible")) {
            $('.right').hide("slide", {
                direction : "right"
            });
 $(".left").animate({'width': '100%'}); 
  } else {
            $('.right').show("slide", {
                direction : "right"
            });
       $(".left").animate({'width': '40%'});
  }
}

Answer 2

以下是您要查找的内容：https://codepen.io/MandeepSingh/pen/mEkJKY

在我的代码笔中，我将右（蓝色）div 的宽度设置为"自动"，并在单击按钮时对左div 的宽度进行动画处理。这会将蓝色div 移动到最右侧（通过动画）。当再次单击按钮时，我只是将黄色div的宽度从100%动画化到其初始大小。

我认为您不希望在动画过程中隐藏div 的内容，所以我在两个div 中都放入了一些垃圾文本，以便您可以看到内容随着调整大小的div 一起移动。

最后一件事，我已经保持我的代码与你的代码接近，但你可以通过使用标志变量在按钮单击时切换动画来避免使用 hide（）， show（） 函数。

这是代码...

.HTML：

<div id="left"> left content
  <button onclick="toggle()">Click Me</button>
  <br>
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam
</div>
<div id="right">right content
<br><br>
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, 
  Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam, Agdam chagdm bagdam dagdam
</div>

.CSS：

html, body {
    height: 100%;
}
body{
    font-size:13px;
    font-family:calibri;
}
#right {
    height: 100%;
    width: auto;
    background: #9ff;
    overflow: hidden;
}
#left {
    height: 100%;
    float: left; 
    width: 40%;
    background: #ff9;
}

.JS：

function toggle()
{
    if($("#right").is(":visible")) 
    {
            $('#left').animate({"width":"100%" }, 3000, function(){
                $("#right").hide();
            });
    } 
    else 
    {
            $('#right').show();
            $('#left').animate({"width":"40%"}, 3000);  
    }
}

-或者- 如果你想避免hide（）和show（），请使用这个JS：

var flag = 0; 
function toggle()
{
    if(flag == 0) 
    {
            $('#left').animate({"width":"100%" }, 3000);
            flag = 1;
    } 
    else 
    {
            $('#left').animate({"width":"40%"}, 3000);
            flag = 0;   
    }
}

另外，您不必为此动画使用 Jquery UI。