Question

我有一个在悬停时增长的div。但是：我应用了200毫秒的CSS转换。

现在，如果我在hover（）上使用jQuery width（） - 函数，由于动画，我得到了错误的值。但是我需要在精确悬停时间的末端状态中悬停宽度，而不是在结尾（这就是为什么setTimeout（）无法解决问题的原因。）

是否可以获得：悬停式？原样？

HTML

<div id="parent">
    <div id="grows"></div>
</div><br><br><br><br>
<span id="width"></span>

CSS

div#parent {
    width: 100px;
    height: 100px;
}

div#grows {
    width: 100%;
    height: 100%;

    background-color: black;

    -webkit-transition: 0.2s ease;
    -moz-transition: 0.2s ease;
    -ms-transition: 0.2s ease;
    -o-transition: 0.2s ease;
    transition: 0.2s ease;
}

div#grows:hover {
    width: 150%;
    height: 150%;
}

和JS：

$(document).ready(function() {
    $('div#grows').hover(function() {
        var width = $(this).css('width')); // Is 100px but should be 150px!
    });
});

这是JSFiddle：http://jsfiddle.net/v15h652h/

编辑：也许还不够清楚：我需要在：hover-style 中确定的悬停时间，不是结束，那就太晚了。

Answer 1

浏览器具有允许处理CSS3过渡（或动画）状态的事件。您可以使用transitionend等待转换完成以执行回调：

$(document).ready(function() {
  $('div#grows').hover(function() {

    $(this).on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
      $(this).off('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend');
      $('#width').html($('#width').html() + ' ' + $(this).css('width'));
    });
  });
});

div#parent {
  width: 100px;
  height: 100px;
}
div#grows {
  width: 100%;
  height: 100%;
  background-color: black;
  -webkit-transition: 0.2s ease;
  -moz-transition: 0.2s ease;
  -ms-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
}
div#grows:hover {
  width: 150%;
  height: 150%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="parent">
  <div id="grows"></div>
</div>
<br>
<br>
<br>
<br>
<span id="width"></span>

PS：我个人更喜欢使用简单的.on()事件处理程序然后.off()删除它而不是Danko的.one()，因为.one()会对于触发的每种事件类型执行一次（特别是对于Chrome，它将执行两次）

jQuery - 找出：悬停式

1 个答案: