jQuery - Animation content inside a div when it becomes the current container on a horizontal slider - jquery-animate

Question

The Setup I have a full screen horizontal slider with 5+ divs that moves to the left when you click on an anchor link. I have some basic knowledge of jquery, and did attempted to use (scrollLeft). But the div is the wrapper div is hiding over flow and doesn't really go anywhere.
The goal is to animate the content inside the container div when it becomes the current container, and undo animation when it does to a different div.
The Issue: I got the animation to play, but have no control over when it starts.
The HTML
<div class="contentItem" id="content2">
<div id="top-box"></div>
<div id="bottom-box"></div>
</div>
<div class="contentItem" id="content3"></div>
<div class="contentItem" id="content4"></div>
<div class="contentItem" id="content5"></div>
The javascript
var theWidth;
var theHeight;
var currentContent = 0;
$(window).resize(function () {
sizeContent();
});
$(window).ready(function () {
sizeContent();
});
function sizeContent() {
theWidth = $(window).width();
theHeight = $(window).height();
sizeContentItems();
setLeftOnContentItems();
sizeContentWrapper(theWidth, theHeight);
moveContent(currentContent, theWidth);
changeSelected(currentContent);
}
function sizeContentItems() {
$(".contentItem").css('width', theWidth);
$(".contentItem").css('height', theHeight);
}
function setLeftOnContentItems() {
var contentCount = 0;
$(".contentItem").each(function (i) {
contentCount += i;
$(this).css('left', i * 990); //slider contern hight
});
}
function sizeContentWrapper(width, height) {
$("#contentWrapper").css('width', width);
$("#contentWrapper").css('height', height);
}
function moveContent(i, width) {
$("#contentWrapper").scrollLeft(i * width);
}
function changeSelected(i) {
$(".selected").removeClass("selected");
$("li:eq(" + i + ") a").addClass("selected");
}
function scrollContentNext() {
scrollContent(currentContent + 1);
}
function scrollContent(i) {
i = checkMax(i);
scrollLogo(i);
scrollTriangle(i);
changeSelected(i)
currentContent = i;
$("#contentWrapper").animate({ scrollLeft: i * 990 }, 400); // how far to go
}
function scrollLogo(i) {
var left = (i * +200);
$("#logo").animate({ left: left }, 1000);
}
function scrollTriangle(i) {
var left = (i * -300);
$("#triangle").animate({ left: left }, 700);
}
// **my edit**
function scrollbox(i) {
var i = currentContent;
if ( currentContent = 2) {
$("#bottom-box").stop().animate({'margin-top': '200px'}, 1500);
}
}
function checkMax(i) {
var maxItems = $("li").length;
if (i >= maxItems) {
return 0;
}
return i;
}