0

首先，我想向大家问好，我很高兴来到这里。我从你们那里学到了很多东西。现在我试图找出一个小问题，但没有得到答案。愿您对我可以在功能行中添加或更改的内容有所了解。

以下工作正常，在我的 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 会展开，鼠标移出后它会回到默认高度。那是对的。

我不知道该怎么做，也找不到其他零食来修复它。

希望你能看懂我的文字。

4

1 回答 1

0

这样做的一种骇人听闻的方法是仅在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。

不确定这是否满足您的需求。

于 2013-04-26T15:12:10.787 回答