Поддержание анимированного Div присутствует на сцене

Я постоянно пытаюсь поддерживать 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);
});

Мое решение не работает хорошо, сильно исчезает и сильно ломается, потому что, как только пользователь покидает черный квадрат, div сразу исчезает. Я хочу, чтобы навести черный квадрат, появится зеленый div, а затем div исчезнет только из IF $(/*.mouseout() of the black square OR the green div*/).fadeOut(thegreendiv).

AKA. Когда вы наведете ссылку "какая-то ссылка здесь" или какая-либо другая часть зеленого div, я хочу, чтобы она осталась там, в противном случае это затухание.

http://jsfiddle.net/SVFge/