Jquery - 动画高度切换

Question

Jquery - 动画高度切换

jqueryheightjquery-animateattr

47

我在屏幕顶部有一个高度为10像素的条，希望在单击时可以将其动画到40像素高度，再次单击时则动画回到10像素。我试图改变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:

这是一个HTML标记，表示在其中包含的文本内容是JavaScript代码。它可以用于将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');
  });
});

- We're All Scholars

3

请勿更改元素的ID。请执行切换类操作，即 <div id="top-bar" />，$("#topbar").toggleClass('hidden')。 - Aleksi Yrttiaho

9个回答

19

你应该使用一个 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');
      }
    });
  });

- Nathan Anderson

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

17

你可以使用toggle-event^(文档)方法来分配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);
    }
})());

- user113716

2

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

3

非常抱歉回复晚了。如果你尝试了以上所有方法都不起作用，可以尝试这个方法，适用于版本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>

- user2756339

2

以下代码对于我在jQuery2.1.3中运行有效。

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

不需要计算你的div高度、内边距、外边距和边框，它会自动处理。

- Mahesh B

2

那将是一个可能性：

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

- AlfaTeK

我该如何将高度从10增加到100%？ - Benjamin Karami

1

我只是想给你解释一下为什么你的解决方案不起作用：

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

为了解决这个问题，你可以使用live事件绑定。

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

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

- Aleksi Yrttiaho

1

你也可以使用这个技巧：将

替换为

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

由

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

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

- Bronco

1

对我起作用：

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

- Elliot

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Christian Myers · Accepted Answer

可以尝试以下方法：

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