jQuery - Анимационный контент внутри div, когда он становится текущим контейнером на горизонтальном слайдере - PullRequest
Новая
       22

jQuery - Анимационный контент внутри div, когда он становится текущим контейнером на горизонтальном слайдере

1 голос
/ 12 января 2012

Настройка У меня есть полноэкранный горизонтальный слайдер с 5+ делениями, который перемещается влево при нажатии на ссылку привязки.У меня есть некоторые базовые знания jquery, и я пытался использовать (scrollLeft).Но 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;
}
...