Links Not Hiding When They Are Supposed To

I have a back button and a forward button. When the first paragraph fades in, back button should be hidden. When the last paragraph fades in, the forward button should be hidden. Yet, neither of them are hiding, ever:

Code:
$nextGraph = $('#group1 p:first');
$('#group1 .slidernav').prepend("<a href='#' class='control' id='leftControl'>Back</a>").append("<a href='#' class='control' id='rightControl'>Forward</a>");
manageControls($nextGraph);
$('#group1 .slidernav a').bind('click', function(){
var triggerID = $active.attr("rel") - 1;
var image_reelPosition = triggerID * imageWidth;
clearInterval(playFade);
// clearInterval(play);

$nextGraph = ($(this).attr('id')=='rightControl') ? $nextGraph.next() : $nextGraph.prev();
manageControls($nextGraph);
$(".image_reel p").animate({
opacity: 0,
left: image_reelPosition + 500
}, 500 );
$nextGraph.animate({
opacity: 1,
left: image_reelPosition
}, 800 );
});

function manageControls(currentGraph){
(currentGraph==$('#group1 p:first')) ? $('#leftControl').hide() : $('#leftControl').show();
(currentGraph==$('#group1 p:last')) ? $('#rightControl').hide() : $('#rightControl').show();
};