Jquery - 动画高度切换答案

【问题标题】：Jquery - animate height toggleJquery - 动画高度切换
【发布时间】：2025-11-29 05:35:01
【问题描述】：

我在屏幕顶部有一个 10 像素的条，当点击它时，我希望它动画到 40 像素的高度，然后如果再次点击，动画回到 10 像素。我尝试更改 div 的 id，但它不起作用。我怎样才能让它工作，或者有更好的方法吗？

正文 html：

<div id="topbar-show"></div>

css:

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

javascript：

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});

【问题讨论】：

请不要更改元素的id。请切换一个类，即
, $("#topbar").toggleClass('hidden');

标签： jquery height jquery-animate attr

【解决方案1】：

试试这个：

$(document).ready(function(){
  $("#topbar-show").toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});

【讨论】：

不是。我只是花了更长的时间来输入我的并提交。（当我查看问题并提交答案时，所有答案都出现了。）
请注意，这种切换自 jQuery 1.9.1 以来已被弃用，并且不会像以前那样工作。对于 >= 1.9.1 的版本，something along these lines will work

【解决方案2】：

您可以使用 toggle-event^(docs) 方法分配 2 个（或更多）处理程序，每次点击都会切换。

示例： http://jsfiddle.net/SQHQ2/1/

$("#topbar").toggle(function(){
    $(this).animate({height:40},200);
},function(){
    $(this).animate({height:10},200);
});

或者您可以创建自己的切换行为：

示例： http://jsfiddle.net/SQHQ2/

$("#topbar").click((function() {
    var i = 0;
    return function(){
        $(this).animate({height:(++i % 2) ? 40 : 10},200);
    }
})());

【讨论】：

+upvote : @user113716 : 你能详细解释一下吗（第二个解决方案）

【解决方案3】：

您应该使用class 来实现您想要的：

css:

#topbar { width: 100%; height: 40px; background-color: #000; }
#topbar.hide { height: 10px; }

javascript：

  $(document).ready(function(){
    $("#topbar").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height:40},200).removeClass('hide');
      } else { 
        $(this).animate({height:10},200).addClass('hide');
      }
    });
  });

【讨论】：

非常容易实现，感谢您的贡献。

【解决方案4】：

很晚了，但我很抱歉。抱歉，如果这“效率低下”，但如果您发现上述所有方法均无效，请尝试此操作。也适用于 1.10 以上版本

<script>
  $(document).ready(function() {
    var position='expanded';

    $("#topbar").click(function() {
      if (position=='expanded') {
        $(this).animate({height:'200px'});
        position='collapsed';
      } else {
        $(this).animate({height:'400px'});
        position='expanded';
      }
    });
   });
</script>

【讨论】：

【解决方案5】：

你也可以使用这个技巧：替换

$("#topbar").click(function(){

通过

$(document).on("click", "#topbar", function(){

这将绑定一个尚未加载的对象上的事件... ;)

【讨论】：

【解决方案6】：

我只是想告诉你你的解决方案不起作用的原因：

当$(document).ready() 被执行时，只有$('#topbar-show') 选择器可以从DOM 中找到匹配的元素。 #topbar-show 元素尚未创建。

要解决这个问题，您可以使用实时事件绑定

$('#topbar-show').live('click',function(e){});
$('#topbar-hide').live('click',function(e){});

这是修复您的解决方案的最简单方法。这些答案的其余部分进一步为您提供更好的解决方案，而不是修改希望永久的 id 属性。

【讨论】：

【解决方案7】：

下面的代码在 jQuery2.1.3 中对我有用

$("#topbar").animate('{height:"toggle"}');

无需计算您的 div 高度、内边距、边距和边框。会小心的。

【讨论】：

【解决方案8】：

这是可能的：

$(document).ready(function(){
  $("#topbar").toggle(function(){
    $(this).animate({height:40},200);
  }, 
  function(){
    $(this).animate({height:10},200);
  });
});

#topbar {
  width: 100%;
  height: 10px;
  background-color: #000;
  color: #FFF;
  cursor: pointer;
}

<!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
      <div id="topbar"> example </div>
    </body>
    </html>

【讨论】：

我如何做到从高度 10 到高度 100%

【解决方案9】：

为我工作：

$(".filter-mobile").click(function() {
   if ($("#menuProdutos").height() > 0) {
      $("#menuProdutos").animate({
         height: 0
      }, 200);
   } else {
      $("#menuProdutos").animate({
         height: 500
      }, 200);
   }
});

【讨论】：