jquery实时监听div高度变化

走不了你

9641925

发布于
2016-12-20

$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});

我想实时的监听$("#box")的高度，请问该如何操作呢？

javascript jquery

阅读 27.6k

6 个回答

vsion

✓ 已被采纳

解释一下什么叫实时的监听?

根据回复补充:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="jquery.min.js"></script>
  <style>
    #box{
      height: 100px;
      width: 100px;
      background: red;
    }
  </style>
</head>
<body>
  <div id="box"></div>
  <button class="btn1">dianwo</button>
  <script>
    $(".btn1").click(function(){
      $("#box").animate({height:"300px"}, {step: function(){console.log($(this).height())}}).resize(function() {
        console.log($(this).height());
      });
    });
  </script>
</body>
</html>

anchovy

1.9k29

发布于
2016-12-20

这样呢？

$("#box").resize(function() {
    console.log($(this).height());
});

kstd123

1.2k1621

发布于
2016-12-20

更新于
2016-12-20

$("#box").bind(,function(){
alert($(this).css.height);
});

solar

2.9k2511

发布于
2016-12-20

更新于
2016-12-20

建议你把js和css区分开，js只起控制作用，不处理样式。

$(".btn1").click(function(){
    $("#box").animate({height:"300px"}); 
});

改成

js:
$('.btn1').click(function(){
    $('#box').addClass('open');
});
$('#box').on('animationiteration', function(){
    console.log($(this).height());
});

css:
@keyframes slidedown {
    from {
        height: 0;
        // 让元素显示出来的代码
    }

    to {
        height: 300px;
    }
}
.open {
    animation: slidedown 0.3s ease-in-out;
}

当然我写得不完整，可能都不会生效，我只是推荐你向这个方向写。这个方向是肯定行得通的。