Question

我试图通过Java脚本获取div的宽度和高度，并且在页面加载时得到了宽度和高度，但是我将div悬停了，所以它没有显示宽度/高度的更新大小。我需要在悬停时增加div的宽度或高度时也要移动/增加并显示div大小的增加。当我制作高度/高度从50％到100％的CSS动画时，我也需要，所以还要向我展示宽度/高度的动画（以像素为单位）。

这是我需要的示例。当div的宽度/高度增加时，顶部黑色区域Video Link

的值也会增加

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Answer 1

您可以使用setInterval()创建间隔，并获取间隔中元素的宽度。

setInterval(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);

$("#w-count").html($('.animating-width').width());
$("#h-count").html($('.animating-width').height());
setInterval(function(){
  $("#w-count").html(
    Math.round($('.animating-width').width())
  );
  $("#h-count").html(
     Math.round($('.animating-width').height())
  );
}, 10);

html {
  background: #292a2b;
  color: #FFF;
}
.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

此外，您可以使用.animate()代替CSS过渡。

$("#w-count").html($('.animating-width').width());
// store first width of element
var width = $(".animating-width").width();
// mouseover & mouseout event
$(".animating-width").mouseover(function(){
  anim('100%');
}).mouseout(function(){
  anim(width);
});
// function of animation
function anim(width){
  $(".animating-width").stop().animate({
    width: width
  }, {
    duration: 1500,
    step: function(){
      $("#w-count").html($(this).width());
    }
  });
}

html {
  background: #292a2b;
  color: #FFF;
}
.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
}
.animating-width:hover {
  cursor: pointer;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Answer 2

使用setInterval将在悬停时以特定间隔渲染div的高度和宽度。

$(document).ready(function() {
  $("#w-count").html($('.animating-width').width());
  $("#h-count").html($('.animating-width').height());
});

$(".animating-width").hover(function(){
   setInterval(function(){
      $("#w-count").html( Math.trunc($('.animating-width').width()));
      $("#h-count").html( Math.trunc($('.animating-width').height()));
   }, 100);
});

html {
  background: #292a2b;
  color: #FFF;
}

.animating-width {
  padding:10px 0;
  text-align:center;
  background: #e78629;
  color: white;
  height: 100px;
  width: 50%;
  -moz-transition: width 2s ease-in-out;
  -o-transition: width 2s ease-in-out;
  -webkit-transition: width 2s ease-in-out;
  transition: width 2s ease-in-out;
}
.animating-width:hover {
  cursor: pointer;
  width: 100%;
}
hr{
  border-color:#e78700;
  border-bottom:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%<hr> <span id="w-count"></span>x<span id="h-count"></span></div>

Answer 3

我个人不会将其绑定到.hover()或.mouseover()方法。我将在外部对其进行构建，并对其进行封装以使其更加灵活。

const [d,resize,opt,ani] = [
    $('div'),
    ()=> d.html(Math.ceil(d.width())+'px'),
    {duration:1e3, step:()=> resize()},
    n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))

const [d,resize,opt,ani] = [
	$('div'),
	()=> d.html(Math.ceil(d.width())+'px'),
	{duration:1e3, step:()=> resize()},
	n=> ()=> d.stop().animate({width:n+'%'}, opt)
]
d.hover(ani(100),ani(50))
resize()

div {
  width: 50%;
  background: orange;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>

fiddle

Answer 4

var targetElement = document.getElementById('target');
var height = 0;
var width = 0;
var updatePosition = function(){
   height = targetElement.offsetHeight;
   width = targetElement.offsetWidth;
};
updatePosition();
targetElement.addEventListener("mouseover", updatePosition);
window.addEventListener("resize", updatePosition);
window.addEventListener("scroll", updatePosition);

Answer 5

您还可以使用过渡结束事件

    $(document).ready(function () {
        DetectTransitionEnding = 'webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend';


      calcSize = function() {
          $("#w-count").html($('.animating-width').width());
          $("#h-count").html($('.animating-width').height());
      }

      calcSize(); // first writting

      myBox = $(".animating-width");


      myBox.hover(function () { 
          myBox.addClass('changeSize');
          myBox.one(DetectTransitionEnding, calcSize);
      });

      myBox.mouseout(function () { 
          myBox.removeClass('changeSize');
          myBox.one(DetectTransitionEnding, calcSize);
      });

    });

    html {
      background: #292a2b;
      color: #FFF;
    }

    .animating-width {
      padding: 10px 0;
      text-align: center;
      background: #e78629;
      color: white;
      height: 100px;
      width: 50%;
      -moz-transition: width 2s ease-in-out;
      -o-transition: width 2s ease-in-out;
      -webkit-transition: width 2s ease-in-out;
      transition: width 2s ease-in-out;
      cursor: pointer;
    }

    .animating-width.changeSize {
      width: 100%;
    }

    hr {
      border-color: #e78700;
      border-bottom: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animating-width">on Hover width 100%
        <hr />
        <span id="w-count"></span>
        x
        <span id="h-count"></span>
    </div>

javascript：即使悬停更改，如何立即获得DIV宽度/高度

5 个答案: