jQuery - 当 div 成为水平滑块上的当前容器时，div 内的动画内容

Question

设置 我有一个全屏水平滑块，包含 5 个以上的 div，当您单击锚链接时，该滑块会向左移动。我有一些 jquery 的基本知识，并尝试使用 (scrollLeft)。但 div 是包装 div 隐藏在流中并且不会真正去任何地方。

目标是在容器 div 成为当前容器时对容器内的内容进行动画处理，并在它对不同的 div 进行动画处理时撤消动画。

问题：我可以播放动画，但无法控制它何时开始。

---

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>

---

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;
}