Как сделать двигающийся блок внутри блока fixed?

Question

[cocomuffin]

Доброго времени суток!
Подскажите, пожалуйста: на странице есть блок-обертка с position: fixed, внутри него есть другой блок с position: fixed, но частично скрытый за правой частью экрана:

.likes-wrap {
    position: fixed;
    width: 100%;
    top: 40%;
    height: 100px;
}

.likes {
    height: 62px;
    opacity: 0.8;
    position: fixed;
    top: 40%;
    right: -210px;
    z-index: 99999;
}

При клике на оставшуюся видной часть блока likes, он должен плавно выехать и стать полноразмерным, но при этом остаться внутри блока likes-wrap (т.е. оставаться на месте при скроллинге, но уже развернутым).

Пробую сделать через скрипт, но так не получается, блок likes уезжает вообще непонятно куда, на странице его нет, и родительский элемент с position:fixed на него не влияет.

$('.likes').css('position','relative');
$('.likes').animate({
                left: '-=200',
            }, 800, function() {
            });

HTML:

<div class="likes-wrap">
    <div class="likes">
          <p>Вам понравилась эта статья?</p>
     </div>
</div>

В чем ошибка? Возможно ли вообще сделать так, как описываю?