How to pause and resume fadeIn() from opacity?

I'm trying to resume a fadeIn() from the opacity where it paused. I have two draggables. If the one is dropped (I called it draggable_purple), a purple div starts to fade in. Only to a specific opacity. When the opacity has been reached, another div appears (lightblue) with a message to drop the yellow-draggable. After the yellow-draggable has been dropped, I want the purple div to proceed the fadeIn.

It might sound a bit far fetched and excuse me for my code, I tried to narrow it down to the only elements that matter in this case.

In the JsFiddle you'll find my solution, but it doesn't work. My question to you is; How would you solve this and why isn't my own solution working. Thank you for your time in advance.

JsFiddle

jQuery

$("#draggable_purple").draggable({
    revert: true
});


$("#draggable_yellow").draggable({
    revert: true
});

$("#orange").droppable({
    drop: function(event, ui) {
        if (ui.draggable.is('#draggable_purple')) {
            $(this).parent().find('#purple').fadeTo(1500, 0.5, onhold);

            $(this).droppable('destroy');
        }
    }
});


function onhold() {
    $(this).parent().find('#lightblue').show();
}

$('#lightblue').droppable({
    accept: '#draggable_yellow',
    drop: function(event, ui) {
        $(this).hide('fast'); $('#purple').css('opacity', 0.5).fadeIn(1500, 1.5);
    }
});

HTML

    <div id="orange">
         <div id="purple">
          </div>
        <div id="lightblue"> Drop the yellow div,
            to continue the fadeIn
          </div>
          </div>

 <div id="draggable_purple"> start purple fadeIn
          </div>
 <div id="draggable_yellow"> resume fadeIn
          </div>

Solution

Change this:

$('#purple').css('opacity', 0.5).fadeIn(1500, 1.5);

To this:

$('#purple').fadeTo(1500, 1);

Here's the updated fiddle

Another thing, this line:

$(this).parent().find('#purple').fadeTo(1500, 0.5, onhold);

Is pointless. You have the id, it's unique, there is no need for parent and find:

$('#purple').fadeTo(1500, 0.5, onhold);