Question

当你转到我网站的任何页面时，我正在使用Jquery为我的文本不透明度（从0到1）设置动画。然后，在主导航单击时，它会初始化文本的动画以淡出，然后初始化链接并转到下一页。但是，出于某种原因，在文本完全动画之前单击主导航时，文本淡出但完全不透明度闪烁，然后加载下一页的链接。我想知道是否有人知道如何纠正这一点，我在下面使用代码。我想我需要以某种方式使用队列，但是再次我不确定这是否有帮助....这是我的网站的链接，你可以看到它闪烁 - ＆gt; www.originalengine.com/test/iindex.html

我从CSS开始使用0不透明度

#AlternateContent{
position: relative;
opacity: 0;
}

然后我淡入文本div

$('#AlternateContent').animate({opacity: '1'},{duration: 2650});

然后这就是我如何检查按下了哪个导航按钮，并为淡出动画设置动画：

if (window.location.pathname === '/test/index.html')

{

$('#AboutButton').bind('click', AboutButton);
$('#PortfolioButton').bind('click', PortfolioButton);
$('#ContactButton').bind('click', ContactButton);

} 

function ContactButton(e) { 

$('#AlternateContent').animate({height: 0},{duration: 2650, queue: false}, 'swing')
.animate({opacity: '0'},{duration: 577, queue: false}, function(){
document.getElementById("AlternateContent").style.opacity=0;
window.location = 'contact.php';

});
}

就像我说的，这很有效，但最后我得到了一个闪光灯。转到我的网站（www.originalengine.com/test/iindex.html）并查看它，如果您在页面之间快速按导航项，同时淡出，文本将再次闪烁'再次'，然后转到下一页，我只是希望它完全淡出!!

提前致谢

Answer 1

可能是因为您有两个同时运行的动画。尝试：

$('#AlternateContent').stop().animate({height: 0},{duration: 2650, queue: false}, 'swing')

使用.animation标签在Jquery中闪烁动画

1 个答案: