javascript - 在场景中维护一个动画 div

Question

我一直在努力保持当用户在其上绘制鼠标时动画仍然在场景中的 div。

HTML

 <table>
      <tr>
        <td id="portrait">
            <div id="photo"></div>
        </td>
        <td id="slide">
            <div id="slider">
                <a id="something" class="thisthing">some link here</a>
            </div>
        </td>

        </tr>
    </table>

CSS

#portrait{
  width:120px;
  height:100px;
  top:20px;
  border: solid black 1px;
  margin: 0px;
  padding: 0px;
}
#slide{
  height:100px;
  border: none;
  padding-left:30px;
}
#slider{
  border: none;
  padding-left:30px;
  background-color:green;
  position:relative;
  height:100%;
  opacity:0;
  width:0px;
  overflow:hidden;
}

.thisthing{
  cursor:pointer;
  font-size: 15px;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  color: green;
  white-space: nowrap;
}

#something{
  position:relative;
  left: -25px;
}

JS

 $('#portrait').mouseover(function(){
    $('#slider').animate({
    opacity: 1,
    width: "300px"
  }, 1500, $.noop);
});

 $('#slider').mouseout(function(){
    $('#slider').animate({
    opacity: 0,
    width: "0px"
  }, 1000, $.noop);
});

我的解决方案根本无法正常工作，褪色严重且滞后很多，因为一旦用户离开黑色方 block ，div 就会立即消失。我想要的是将黑色方 block 悬停，出现绿色div然后仅当div消失 $(/* .mouseout() 黑色方 block 或绿色 div*/).fadeOut(thegreendiv).

AKA 当您将链接悬停在“此处的某个链接”或绿色 div 的任何其他部分时，我希望它保留在那里，否则会淡出。

http://jsfiddle.net/SVFge/

Answer 1

JSFIDDLE

使用方法 mouseenter 和 mouseleave 而不是 over 和 out 并且有更大的 mouseleave 区域

HTML

<table id="hoverOutZone">
  <tr>
    <td id="portrait">
      <div id="photo"></div>
    </td>
    <td id="slide">
      <div id="slider">
        <a id="something" class="thisthing">some link here</a>
      </div>
    </td>
  </tr>
</table>

新 JS

$('#portrait').mouseenter(function () {
    $('#slider').animate({
        opacity: 1,
        width: "300px"
    }, 1500);
});

$('#hoverOutZone').mouseleave(function () {
    $('#slider').animate({
        opacity: 0,
        width: "0px"
    }, 1000);
});