全部,
我正在使用 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;
}
Here is the working prototype on jsfiddle (按右侧浅绿色按钮“右”按钮)
最佳答案
不要使用超时来指示何时设置 CSS。
.animate()函数带有一个完整的回调,将在动画完成时运行。
$(eTabIndDiv.children[iActiveNo - 1])
.animate({width: "12px"}, 250)
.animate({width: "18px"},
{complete: function(){
ePreviousTab.css('width', '0');
},
duration: 125});
关于javascript - Js - 理解时间和冲突属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7756395/