我有一种启动屏幕,您可以在其中按其中一个 Logo ,它会将 Logo 动画到中心,然后加载其内容。然后,当您按下主顶部 Logo 时,它会隐藏内容并返回到启动屏幕。但是我在这方面遇到了问题。
比如,容器隐藏,然后又回来。
你自己找吧:http://dan.roguedraco.net/SpyroDev/ 如果您在内容完全显示之前单击顶部 Logo ,则会发生这种情况,但我希望允许所有这些情况发生。因为用户可能会做同样的事情。
Javascript:
$(document).ready(function() {
var inPage = false;
$('.ajax-loader').click(function() {
if(inPage == false) {
inPage = true;
var Obj = this;
$(Obj).siblings("a").fadeOut(500,function() {
if($(Obj).hasClass('left') || $(Obj).hasClass('right')) {
$(Obj).animate({left:'300px'},'slow','easeOutBack',function() {
$('#pageContent').fadeIn(500,function() {
$("#tabs").tab();
});
});
}
else {
$('#pageContent').fadeIn(500,function() {
$("#tabs").tab();
});
}
$(Obj).addClass('current-project');
});
}
});
$('#rootLogo').click(function() {
var Obj = $('.current-project');
if(inPage == true) {
inPage = false;
$('#pageContent').fadeOut(500,function() {
$(this).hide();
if($(Obj).hasClass('left')) {
$(Obj).animate({left:'0px'},'slow','easeOutBack',function() {
$(Obj).siblings("a").fadeIn(500);
});
}
else if($(Obj).hasClass('right')) {
$(Obj).animate({left: '600px'},'slow','easeOutBack',function() {
$(Obj).siblings("a").fadeIn(500);
});
}
else {
$(Obj).siblings("a").fadeIn(500);
}
$(Obj).removeClass('current-project');
});
}
});
});
HTML:
<div id="thumbnails">
<div class="row-fluid">
<div class="span12" style="text-align: center;color:#fafafa;">
Click a plugin title for more information and downloads.
</div>
</div>
<div class="row-fluid">
<div class="span12" id='thumbnails'>
<a href="#" class="ajax-loader left" project="JumpPorts" page="Home"><img src="projects/JumpPorts/thumb.png" alt="JumpPorts" /></a>
<a href="#" class="ajax-loader" project="RankUpOnKills" page="Home"><img src="projects/RankUpOnKills/thumb.png" alt="RankUpOnKills" /></a>
<a href="#" class="ajax-loader right" project="InfoButton" page="Home"><img src="projects/InfoButton/thumb.png" alt="InfoButton" /></a>
</div>
</div>
</div>
<div id="pageContent" style="display:none;">
<div class="row-fluid">
...
最佳答案
您是否尝试过使用 .stop()
在您的.animate()
之前和.fadeIn()
和其他动画方法?例如:$(Obj).stop().animate({left:
关于javascript - jquery动画随机发生,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12450099/