jQuery Joyride function options not working like they should

Question

I am using Joyride and I am trying to have a function fire before it starts, after the first step, and then after it is over.

I thought that this is how I should achieve this:

$("#ic-instructions").joyride({
 pre_ride_callback      : joyRideDim(),
 post_step_callback     : joyRideNext(),
 post_ride_callback     : joyRideOver(),
 tip_animation          : 'fade',
 autoStart              : true 

});

These are what the functions that I call look like:

function joyRideDim(){ 
$('#ic-spacetemp').css({ 'box-shadow' : '0 0 20px rgba(81, 203, 238, 1)' });


}

function joyRideNext(){  
$('#ic-spacetemp').css({ 'box-shadow' : 'none' });
$('#help-tip').css({ 'box-shadow' : '0 0 20px rgba(81, 203, 238, 1)' });

}

function joyRideOver() {
    $('.ic-joyride-dim').css({' display' : 'none'});
    $('#help-tip').css({'box-shadow' : 'none' });

}

This is the element where the joyride tooltips are:

<ol id="ic-instructions" style="display: none;"data-joyride>
    <li class="ic-instruct" data-button="OK, got it." data-id="ic-spacetemp">Enter the values of your own refrigeration system to calculate how much IntellFrost could save you in defrost costs.</li>
    <li class="ic-instruct" data-options="nubPosition: top-right;" data-button="OK, I'm ready to calculate." data-id="help-tip">If you aren't sure what a certain input is, hover over the "i" icon for an explanation</li>
</ol>

What ends up happening is it seems like the 3 functions all fire at once. So I just end up with no box-shadow on anything. If I remove the "post_step_callback" and "post_ride_callback" options then it just adds the box-shadow but it never takes it away. Which makes sense. It seems like my post_step and post_ride functions are just all happening at once. Does anyone know why?