Js-把握时机&冲突属性

Js - making sense of timing & conflicting properties

本文关键字：冲突 属性 amp 时机 Js-      更新时间：2023-09-26

全部，

我使用jquery在li元素上设置滑动效果动画。虽然我已经设法创建了滑动效果，但它没有正确设置动画。

问题：我认为问题在于jquery动画计时，它与jquery animate调用下面的其余代码冲突。

代码：以下是相关的审查代码(下面的jsfiddle链接(：

    function activateRightTab()
{
    var eTabIndDiv = document.getElementById ("feature_tabs_indicators").children[0];
    var iIndsCount = eTabIndDiv.childNodes[1].children.length;
    var direction = "right";
    if (iActiveNo < iTabsCount - 1 && iActiveNo >= 0)
    {
        iActiveNo = iActiveNo + 1;
        var eCurrentTab = eTabsDiv.children[iActiveNo];
        var ePreviousTab = eTabsDiv.children[iActiveNo - 1];
        if (iActiveNo > 0)
        {
            ePreviousTab.style.position = "relative";
            $(ePreviousTab).animate({"right" : "210px"}, 250);
            $(eTabIndDiv.children[iActiveNo - 1]).animate({"width" : "12px"}, 250).animate({"width" : "18px"}, 125);
            // ****** the following three lines conflict with the above jquery line ******  
            self.setTimeout(ePreviousTab.style.width = "0", 250);
            ePreviousTab.style.color = "transparent";
            ePreviousTab.style.position = "static";
        }
        eCurrentTab.style.position = "relative";
        eCurrentTab.style.right = "-210px";
        eCurrentTab.style.width = "210px";
        eCurrentTab.style.backgroundColor = "rgb(165,145,176)";
        eCurrentTab.style.color = "black";
        $(eCurrentTab).animate({"right" : "10px"}, 250).animate({"right" : "0"}, 125);
        $(eTabIndDiv.children[iActiveNo]).animate({"width" : "127px"}, 250).animate({"width" : "121px"},125);
    }
    if (iActiveNo === iTabsCount - 1 && eRightScrollButton.style.opacity === "0.5")         //springy effect when no other right tab
    {
        $(eTabsDiv.children[iActiveNo]).animate({"right" : "10px"}, 100).animate({"right" : "-5px"}, 45).animate({"right" : "0"}, 10);          
    }
    (iActiveNo === iTabsCount - 1) ? eRightScrollButton.style.opacity = "0.5" : false;
    activateFeaturesContainer(direction);
    return iActiveNo;
}

这是jsfiddle上的工作原型(按下右侧的浅绿色按钮"rght"按钮(

不要使用超时来指定何时设置css。

animate((函数附带一个完整的回调，该回调将在动画完成时运行。

$(eTabIndDiv.children[iActiveNo - 1])
                .animate({width: "12px"}, 250)
                .animate({width: "18px"},
                         {complete: function(){
                             ePreviousTab.css('width', '0');
                          }, 
                          duration: 125});

http://jsfiddle.net/RtaK7/4/

您必须将setTimeout中的代码封装在函数中。目前，宽度正在立即设置：

self.setTimeout(ePreviousTab.style.width = "0", 250);
// Should be:
self.setTimeout(function(){ePreviousTab.style.width = "0";}, 250);
相关文章：