Question

我有两个并排堆叠的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);
  }
}

Codepen链接：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

在我的codepen中，我将右（蓝色）div的宽度设置为＆＃34; auto＆＃34;并在按钮单击时为左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来制作这个动画。

动画隐藏了两个并排div中的一个，给另一个div带来了生涩的动作

2 个答案: