Jquery - 动画高度切换

发布于 2024-10-17 02:00:00 字数 664 浏览 6 评论 0原文

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

正文 html:

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

原文

I have a 10px bar along the top of the screen that, when clicked, I want it to animate to a height of 40px and then if clicked again, animate back down to 10px. I tried changing the id of the div, but it isn't working. How could I get this to work, or is there a better way to do it?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

猫瑾少女 2024-10-24 02:00:00

尝试一下：

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

Give this a try:

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

回复收藏 0 原文

不必你懂 2024-10-24 02:00:00

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

You should be using a class to achieve what you want:

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

回复收藏 0 原文

流殇 2024-10-24 02:00:00

您可以使用 toggle-event^{(docs)< /i>} 方法分配 2 个（或更多）每次点击时切换的处理程序。

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

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

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

示例： http://jsfiddle.net/SQHQ2/< /a>

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

You can use the toggle-event^(docs) method to assign 2 (or more) handlers that toggle with each click.

Example: http://jsfiddle.net/SQHQ2/1/

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

or you could create your own toggle behavior:

Example: http://jsfiddle.net/SQHQ2/

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

回复收藏 0 原文

渔村楼浪 2024-10-24 02:00:00

很晚了但我很抱歉。抱歉，如果这“效率低下”，但如果您发现上述所有方法均不起作用，请尝试此操作。也适用于 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>

Very late but I apologize. Sorry if this is "inefficient" but if you found all the above not working, do try this. Works for above 1.10 also

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

回复收藏 0 原文

月棠 2024-10-24 02:00:00

下面的代码在 jQuery2.1.3 中为我工作，

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

不需要计算你的 div 高度、填充、边距和边框。它会照顾的。

The below code worked for me in jQuery2.1.3

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

Need not calculate your div height,padding,margin and borders. It will take care.

回复收藏 0 原文

左岸枫 2024-10-24 02:00:00

这将是一种可能性：

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

That would be a possibility:

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

回复收藏 0 原文

錯遇了你 2024-10-24 02:00:00

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

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

为

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

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

You can also use this trick:
replace

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

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

This will bind an event on a not loaded yet object...
;)

回复收藏 0 原文

瞄了个咪的 2024-10-24 02:00:00

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

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

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

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

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

I just thought to give you the reason why your solution did not work:

When $(document).ready() is executed only the $('#topbar-show') selector can find a matching element from the DOM. The #topbar-show element has not been created yet.

To get past this problem, you may use live event bindings

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

This is the most simple way to fix you solution. The rest of these answer go further to provide you a better solutions instead that do not modify the hopefully permanent id attribute.

回复收藏 0 原文

萌梦深 2024-10-24 02:00:00

为我工作：

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

Worked for me:

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

回复收藏 0 原文

~没有更多了~