示例图

所以我在一个表格单元格内有2个div。 上方是1格,下方是1格。 底部的那个是不可见的,因此顶部的div占据了表格单元格的整个高度。 单击按钮后,底部div变为可见,顶部div降低其高度,为底部div腾出空间。 因此,这将在再次单击按钮时切换,底部div隐藏,顶部div占据单元格高度。

这是我所拥有的,但是失败了:

 $('#button').click(function(){

   $('#bottomdiv').toggle(function(){
      $("#topdiv").animate({height:250},200);
   },function(){
      $("#topdiv").animate({height:400},200);
   });

});

感谢您的帮助,jsfiddle演示非常感谢!

#1楼 票数:1

您接近了-我想您只需要将“点击”处理程序更改为“切换”即可。 例如: (JS Fiddle)

jQuery(document).ready(function($) {
     $('#button').toggle(function () {
         // Show bottom
         $("#topdiv").animate({
             height: 400
         }, 200);
         $("#bottomdiv").slideUp();
         //console.log("bottom shown:", $("#bottomdiv"));
     }, function () {
         // Hide bottom
         $("#topdiv").animate({
             height: 250
         }, 200);
         $("#bottomdiv").slideDown();
         //console.log("bottom hidden:", $("#bottomdiv"));
     });
});

#2楼 票数:0

$('body').on('click', '#button', function(){
  $('#topdiv').animate({
    height : '250px'
  }, {
     duration : 200,
     complete : function(){
       $('#bottomdiv').animate({
          height: '400px'
       }, 200);
     }
  });
});

  ask by Quaking-Mess translate from so

未解决问题?本站智能推荐:

3回复

jQuery悬停动画高度(切换)

我确定这是一个常见问题,并且我已经在此站点上尝试了许多线程来尝试解决我的问题,但是我似乎无法使其正常运行。 基本上,我有一个子菜单,当父菜单悬停在上面时,我需要显示该菜单,但是如果在完成加载之前将鼠标从菜单项上移开,则当再次将鼠标悬停在菜单上时,新的切换高度是错误的。 那有道理吗? 我正在
1回复

激活另一个切换后是否取消切换?

我有一些简单的代码(可能是不必要的)麻烦。 我有3张图片,点击后打开下面的三个div之一。 我只是希望能够取消任何先前打开的div上的切换,以便在任何给定时间只能打开一个。 目前的问题是,当第二次单击一个按钮时,什么也没有发生,因为它取消了切换,而不是打开div。 正如您可能会从我的
6回复

JQuery切换帮助

这段代码在这里打开了一个div并对其进行了动画处理。 是的,这对我来说很好... 我的问题是,我该如何切换? 我可以打开它,但是我如何关闭它...意味着...滑动高度为200px。 你懂我的意思吗? 我点击“阅读更多”(a.trigger),它会将高度+ 200px设置为动画。但
2回复

jQuery多面板切换

我正在为iPhone开发人员开发投资组合网站。 在此站点中,iPhone应用程序图标将用作描述应用程序面板的切换按钮。 这些面板为主页内容设置动画。 要添加此内容,如果一个面板打开并且单击了另一个应用程序图标,则需要关闭打开的面板,然后打开下一个应用程序。 目前,我拥有的脚本非常适合切换
1回复

jQuery特殊div高度动画

有没有一种方法可以通过允许div的顶部和底部都扩展来在jQuery中设置div高度的动画? 我想在LDS主页上进行类似操作:www.lds.org。 顶部横幅图片左侧的div是我想要的类型。
4回复

jQuery反向动画步骤/切换

我有一个HTML结构,需要在点击时进行动画处理。 我已经写了上半年来实现此目的,但是不确定再次单击事件处理程序时如何撤消这些步骤。 到目前为止的代码http://jsfiddle.net/aYfUH/ 另外,像这样叠加动画方法是实现动画步骤的最佳方法吗?
1回复

jQuery幻灯片切换动画与其他元素一起

我正在尝试使用jQuery toggle() 从左到右实现幻灯片切换,反之亦然。 切换有效,但是我希望div的下一个元素切换为平滑动画,与切换效果平行。 检查我试过的代码: jsFiddle HTML jQuery的 CSS 您可以在输出中看到"othe
1回复

jQuery,将高度从可变值动画化为自动在div上

我想使用切换动画将div的高度从变量值动画化为自动。 我知道我没有正确调用变量。 只是想看看如何做到这一点。