Jquery - 使标签同步动画

时间:2012-05-01 10:27:02

标签: javascript jquery tabs jquery-animate carousel

这是jsfiddle demo

我试图同步动画我的旋转木马中的标签,即它们都应该左右滑动。但是,正如您将从演示中注意到的那样,有时他们会这样做,而其他人则没有。

有人可以指出我哪里出错吗?我不只是在寻找正确的代码,而是逻辑&请解释。

我试图尽可能多地评论代码,以便更容易遵循&找出问题所在。具有“animate”代码的行具有注释:// *****注意 - 这就是使用TABS滚动权利的线条*****

代码:

var eLeftScrollButton = document.getElementById("t_l_nav");
var eRightScrollButton = document.getElementById("t_r_nav");
var eArrowForTabs = document.getElementById("arrow");
var iActiveNo = 0;        //var. for storing the active tab. no.
var iTabSlideNo = 0;
var iTabWidth = 147;            // a tab's width
var eTabsDiv = document.getElementById("tabs");
var iTabsCount = eTabsDiv.childNodes.length;        //tabs count
var bClickable = true;                     // bool whether left & right buttons are clickable or not
var iButtonsPage = 1;                     // button page no.
var iStonesPage = 1;                     // stones page no.
var iRibbonsPage = 1;                     // ribbons page no.
var iLacesPage = 1;                     // laces page no.
var iPipingPage = 1;                     // laces page no.
displayTabNo_onstart();


/* ---------- displaying the current tab, hiding the other non-current tabs ---------- */
function displayTabNo_onstart()
{
    for ( var i = 0; i < iTabsCount; i++)
    {
        if (i === iActiveNo)
        {
            eTabsDiv.children[i].style.color = "black";
            eTabsDiv.children[i].style.fontWeight = "bold";
        } else
        {
             eTabsDiv.children[i].style.opacity = "0.2";
             eTabsDiv.children[i].style.fontWeight = "normal";
        }
    }
}

/* ---------- activate the button, ribbons etc based on what tab is active right now, & hide others ---------- */
function activateFeaturesContainer (direction)
{
        var eFeaturesContainerDiv = document.getElementById("features");
        eFeaturesContainerDiv.children[iActiveNo].style.display = "block";
        (direction === "right") ? ((eFeaturesContainerDiv.children[iActiveNo - 1].style.display = "none") & (bClickable = true)) : ((eFeaturesContainerDiv.children[iActiveNo + 1].style.display = "none") & (bClickable = true));
}

/* ---------- called when the right button for tabs is pressed, calls the below two 'right' functions ---------- */
function pressRightButton ()
{
    if (bClickable === true)
    {
        bClickable = false;
        pressRightButtonEffect();
        activateRightTab();    
    } else {
        return;
    }
}

/* ---------- called when the left button for tabs is pressed, calls the below two 'left' functions ---------- */
function pressLeftButton ()
{
    if (bClickable === true)
    {
        bClickable = false;
        pressLeftButtonEffect();
        activateLeftTab();
    } else {
        return;
    }
}

/* ---------- effect on right button when pressed ---------- */
function pressRightButtonEffect()    
{
    eRightScrollButton.style.top = "29px";        
    window.setTimeout(function()
    {
        var eStyle = window.getComputedStyle(eRightScrollButton);
        var pBackgroundColorProperty = eStyle.backgroundColor;            // getting the CSS backgroundColor
        eRightScrollButton.style.top = "28px";
    }, 150);    
}

/* ---------- effect on left button when pressed ---------- */
function pressLeftButtonEffect()
{
    eLeftScrollButton.style.top = "29px";        
    window.setTimeout(function()
    {
        var eStyle = window.getComputedStyle(eLeftScrollButton);
        var pBackgroundColorProperty = eStyle.backgroundColor;            // getting the CSS backgroundColor
        eLeftScrollButton.style.top = "28px";        
    }, 150);
}

/* ---------- tabs indicator, tabs & other animations on right button when pressed ---------- */
function activateRightTab()
{
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        (iActiveNo > 0) ? eLeftScrollButton.childNodes[0].setAttribute("src", "Img/WA03_Container_LeftScrollButton_Active.png") : false;            //reinstate leftScrollbutton to active
        (iTabSlideNo < iTabsCount - 1) ? iTabSlideNo++ : iTabSlideNo;
// ***** NOTE -- THIS IS THE LINE THATS ANIMATING THE TABS TO SCROLL RIGHT *****
        $(".c_tabs").animate ({"right": ("+=147px")}, 500, "swing", function()
        {
            $(eTabsDiv.childNodes[iActiveNo]).animate ({"opacity" : "1"}, 191,"linear");
            $(eTabsDiv.childNodes[iActiveNo - 1]).animate ({"opacity" : "0.2"}, 191,"linear");            
        });
        window.setTimeout (function ()
        {
            eTabsDiv.childNodes[iActiveNo].style.fontWeight = "bold";
            eTabsDiv.childNodes[iActiveNo-1].style.fontWeight = "normal";                
        },500);
        $(eArrowForTabs).animate ({"top" : "69px"}, 191, "linear", function()
        {
            window.setTimeout (function()
            {    $(eArrowForTabs).animate ({"top" : "55px"}, 191, "linear");        }, 75);
        });
        (iTabSlideNo + 1 === iTabsCount) ? eRightScrollButton.childNodes[0].setAttribute ("src", "Img/WA02_Container_RightScrollButton_Passive.png"):false;
        window.setTimeout (function()    {activateFeaturesContainer(direction);}, 600);
    }    else {
        bClickable = true;
    }             // close -> first if statement of this function
    if (iActiveNo === iTabsCount - 1 && eRightScrollButton.childNodes[0].getAttribute("src") === "Img/WA02_Container_RightScrollButton_Passive.png")            //springy effect on last tab
    {
        $(eTabsDiv.childNodes[iActiveNo]).animate({"right" : (((iTabSlideNo * iTabWidth) + 10) + "px")}, 100).animate({"right" : (((iTabSlideNo * iTabWidth) - 5) + "px")}, 45).animate({"right" : (((iTabSlideNo * iTabWidth) + 0) + "px")}, 10);
    }            // close -> springy effect if statement
}            // close -> activateRightTab function


/* ---------- tabs indicator, tabs & other animations on left button when pressed ---------- */
function activateLeftTab()
{
    var direction = "left";
    if (iActiveNo <= iTabsCount -1 && iActiveNo > 0)            //because length doesn't count 0 & we are substracting 1 below
    {
        iActiveNo = iActiveNo - 1;
        (iActiveNo < iTabsCount - 1) ? eRightScrollButton.childNodes[0].setAttribute("src", "Img/WA01_Container_RightScrollButton_Active.png") : false;                      (iTabSlideNo > 0) ? iTabSlideNo-- : false;            
            $(".c_tabs").animate ({"right": ("-=147px")}, 500, "linear", function()
            {
                $(eTabsDiv.childNodes[iActiveNo]).animate ({"opacity" : "1"}, 250,"linear");
                $(eTabsDiv.childNodes[iActiveNo + 1]).animate ({"opacity" : "0.2"}, 250,"linear");
            });
            window.setTimeout ( function ()
            {
                eTabsDiv.childNodes[iActiveNo].style.fontWeight = "bold";
                eTabsDiv.childNodes[iActiveNo-1].style.fontWeight = "normal";                
            },500);
            $(eArrowForTabs).animate ({"top" : "69px"}, 191, "linear", function()
            {
                window.setTimeout( function()
                {    $(eArrowForTabs).animate ({"top" : "55px"}, 191, "linear");        }, 75);
            });
            (iTabSlideNo === 0) ? eLeftScrollButton.childNodes[0].setAttribute ("src", "Img/WA04_Container_LeftScrollButton_Passive.png") : false;
            window.setTimeout( function() {activateFeaturesContainer(direction)}, 600);    
    } else {         // close -> first if statement of this function
        bClickable = true;
    }    
    if (iActiveNo === 0 && eLeftScrollButton.childNodes[0].getAttribute("src") === "Img/WA04_Container_LeftScrollButton_Passive.png")            //springy effect on last tab
    {
        $(eTabsDiv.childNodes[iActiveNo]).animate({"right" : (((iTabSlideNo * iTabWidth) - 10) + "px")}, 100).animate({"right" : (((iTabSlideNo * iTabWidth) + 5) + "px")}, 45).animate({"right" : (((iTabSlideNo * iTabWidth) + 0) + "px")}, 10);
    }            // close -> springy effect if statement
}            // close -> activateRightTab function

0 个答案:

没有答案