动画隐藏给出生涩运动到其他分区

我有2周的div并排叠压边。使用jQueryUI，我使用幻灯片动画隐藏其中一个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

来源

2016-04-25 Ramandeep Singh

不明白你想要什么。请解释 – Atula

@Atula，对不明的帖子感到抱歉。我编辑了原文，以更好地阐明问题。谢谢。 –

试试这个

.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%'}); 

    } 
}

来源

2016-04-25 14:29:02 Atula

我试过了，但无法达到预期的效果。你能否用你的解决方案编辑笔？ –

请尝试http://codepen.io/Atula/pen/RaYZgz?editors=0010。但是这是在我身边显示一个白页，也检查你的一面。 – Atula

如果您添加背景：＃ff9身体，那么白页问题将得到解决。 – Atula

这里是你在找什么： https://codepen.io/MandeepSingh/pen/mEkJKY

在我codepen，我设置正确的（蓝色）格为“自动”的宽度和动画按钮单击左div的宽度。这将蓝色的div移动到最右边（通过动画）。当再次点击该按钮时，我只是将黄色div的宽度从100％恢复为初始大小。

我想你不想在动画中隐藏div的内容，所以我在这两个div中放入了一些垃圾文本，以便您可以看到随着调整大小的div移动的内容。

最后一两件事，我遵守了我的代码尽可能靠近你的，但你能避免使用隐藏（），显示（）用一个标志变量来切换按钮单击动画功能。

下面的代码...

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); 
    } 
}

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

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。

来源

2016-08-24 13:39:59

动画隐藏给出生涩运动到其他分区

回答

相关问题