Question

首先，我想对所有人说好话，我很高兴来到这里。我从你们那里读到并学到很多东西。现在我试着找出一个小问题，但没有得到答案。您是否知道我可以在功能行中添加或更改内容。

以下工作正常，我的php网站没有错误...

我正在使用此标题中的行：

../jquery-1.8.0.min.js"></script>
../animate-colors-min.js"></script>

这是身体中的div：

<div id="access"></div>

这是CSS行：

#access {
   background: #31363E;
   display: block;
   width: 50%;
   overflow: hidden;
   height: 22px;
   opacity: 0.8;
}

......最后是动画代码等：

$(document).ready(function() {

  $('#access').hover(function() {
    $.data(this, "timer", setTimeout($.proxy(function() {
    $(this).animate({backgroundColor:"#12121c", height:"+=113px"}, 500);
  },this), 1000));
  }, function() {
    clearTimeout($.data(this, "timer"));
    $(this).animate({backgroundColor:"#31363E", height:"-=113px"}, 500);
  });

});

确定。我想你已经可以看到问题了。如果我将光标移动到div上并且不想等待1秒并将光标从div移开，则div将最小化其高度。那是错的，需要修复。

如果我等待1秒或更长时间，div将进行扩展，鼠标输出后它将返回默认高度。那是对的。

我不知道该做什么，也找不到其他款待修复它。

希望你能理解我的写作。

Answer 1

如果div的身高超过阈值，那么这种做法就是只会收缩。

$(document).ready(function() {

  $('#access').hover(function() {
    $.data(this, "timer", setTimeout($.proxy(function() {
    $(this).animate({backgroundColor:"#12121c", height:"+=113px"}, 500);
  },this), 1000));
  }, function() {
    clearTimeout($.data(this, "timer"));
    if ($(this).height() > 22) {
      $(this).animate({backgroundColor:"#31363E", height:"-=113px"}, 500);
    }
  });

});

这是JS Fiddle。

不确定这是否符合您的需求。

悬停后使用计时器清除动画

1 个答案: