我如何在 jquery 中将特定高度设置为 100%

发布于 2024-11-27 07:01:43 字数 507 浏览 4 评论 0原文

我想对 div 中的内容进行一些“预览”,因此我将其做得很小,只显示第一行。现在我想对其进行动画处理,当您单击标题时,div 的高度将为 100%,但是当我使用 animate(height:"100%") 时,没有很好的滑动。

<a href="javascript:void(0);" class="show_it">title:</a>
<div>
    content<br>
    content_hidden
</div>

<script>
$('.show_it').click(function() {
  $(this).next("div").animate({
    height: 'auto'
  }, 1000, function() {
  });
});
</script>

<style>
div{
    height:20px;
    overflow:hidden;
}
</style>

i want to have a little "preview" of the content in the div, so i made it so small that only only the first line is shown. now i want to animate it that when you click the title, the div will have the height of 100%, but when i use animate(height:"100%") there is no nice sliding.

<a href="javascript:void(0);" class="show_it">title:</a>
<div>
    content<br>
    content_hidden
</div>

<script>
$('.show_it').click(function() {
  $(this).next("div").animate({
    height: 'auto'
  }, 1000, function() {
  });
});
</script>

<style>
div{
    height:20px;
    overflow:hidden;
}
</style>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(3

几味少女 2024-12-04 07:01:43

虽然我确信有更好的方法来做到这一点,因为这种方法充其量是马虎的,如果您找不到其他解决方案,您可以随时尝试这个:

$('.show_it').click(function() {

// Animate to 100% in 1 millisecond
$(this).parent().next("div").animate({height: 'auto'}, 1);

// Record the height of the div
var newHeight = $(this).parent().next("div").height();

// Animate height to 0% in 1 millisecond
$(this).parent().next("div").animate({height: '0px'}, 1);

// Do the animation using the new fixed height.
  $(this).parent().next("div").animate({
    height: newHeight,
  }, 1000, function() {
  });
});

但是,正如我所说,这非常马虎 - 如果它适合您的需求,尝试 jquery SlideDown();这是一个更好的方法。

Although I am sure there is a better way of doing this as this method is sloppy AT BEST, if you don't find another solution you could always try this:

$('.show_it').click(function() {

// Animate to 100% in 1 millisecond
$(this).parent().next("div").animate({height: 'auto'}, 1);

// Record the height of the div
var newHeight = $(this).parent().next("div").height();

// Animate height to 0% in 1 millisecond
$(this).parent().next("div").animate({height: '0px'}, 1);

// Do the animation using the new fixed height.
  $(this).parent().next("div").animate({
    height: newHeight,
  }, 1000, function() {
  });
});

However, as I said this is very sloppy - if it fits your needs, try jquery slideDown(); this is a much better way to do it.

热风软妹 2024-12-04 07:01:43

或者这个:

$('.show_it').click(function(){
   $(this).parent().next("div").css("height", "100%");
   var h = $(this).parent().next("div").height();
   $(this).parent().next("div").css("height", "0px");
   $(this).parent().next("div").animate({height: h}, 1000, function() {
   });
});

Or this:

$('.show_it').click(function(){
   $(this).parent().next("div").css("height", "100%");
   var h = $(this).parent().next("div").height();
   $(this).parent().next("div").css("height", "0px");
   $(this).parent().next("div").animate({height: h}, 1000, function() {
   });
});
避讳 2024-12-04 07:01:43

试试这个

$('.show_it').click(function() {
  var $div = $(this).parent().next("div");
  var h = $div.children().each(function(){ h = h+ $(this).height(); });
  $div.animate({
    height: h
  }, 1000, function() {
  });
});

Try this

$('.show_it').click(function() {
  var $div = $(this).parent().next("div");
  var h = $div.children().each(function(){ h = h+ $(this).height(); });
  $div.animate({
    height: h
  }, 1000, function() {
  });
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文