Question

我在屏幕顶部有一个10px的条形图，当点击它时，我想让它动画到40px的高度，然后再次点击，动画回到10px。我尝试更改div的id，但它无法正常工作。我怎么能让它工作，还是有更好的方法呢？

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

Answer 1

尝试一下：

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

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

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

Answer 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>

Answer 5

那是可能的：

$(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>

Answer 6

我只是想告诉你解决方案无效的原因：

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

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

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

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

Answer 7

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

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

通过

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

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

Answer 8

以下代码适用于jQuery2.1.3

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

无需计算div高度，填充，边距和边框。它会照顾。

Answer 9

为我工作：

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

Jquery - 动画高度切换

9 个答案: