我在设置登录框的动画时遇到问题。当我第一次加载页面时,动画效果非常好。但在第一次单击后,fadeIn工作,但动画不工作。这是代码。。。
$('#LoginShow').click(function(e){
$('.Black-Background-A').fadeIn(1000, 'swing');
$("#Login").animate({marginTop:'25px'}).fadeIn(500, 'swing');
});
$('.Black-Background-A').click(function(){
$('.Black-Background-A').fadeOut(1000, 'swing');
$("#Login").animate({marginTop:'+=50px'}).fadeOut(500, 'swing');
});
以下部分每次都与fadeIn
一起工作,但第二次激发时,fadeIn
部分工作,但animate
部分不工作。查看:http://www.farrislab.net
$('#LoginShow').click(function(e){
$('.Black-Background-A').fadeIn(1000, 'swing');
$("#Login").animate({marginTop:'25px'}).fadeIn(500, 'swing');
});
对我来说,你的原始代码正在运行,但你可能做错了什么,试着拿出你的CSS文件,再次检查函数
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
</head>
<body>
<div style="border:1px solid black" id=LoginShow>LoginShow</div>
<div style="border:1px solid black" class=Black-Background-A>Black-Background-A</div>
<div style="border:1px solid black" id=Login>Login</div>
<script>
$('#LoginShow').click(function(e){
$('.Black-Background-A').fadeIn(1000, 'swing');
$("#Login").animate({marginTop:'25px'}).fadeIn(500, 'swing');
});
$('.Black-Background-A').click(function(){
$('.Black-Background-A').fadeOut(1000, 'swing');
$("#Login").animate({marginTop:'+=50px'}).fadeOut(500, 'swing');
});
</script>
</body>
</html>
我已经想通了。。。我不得不在应用fadeOut的animate中添加一个回调函数。这是代码。。。
$('#LoginShow').click(function(){
$('.Black-Background-A').fadeIn(500, 'swing');
$("#Login").animate({marginTop:'50px'}, 500, 'swing');
});
$('.Black-Background-A').click(function(){
$('.Black-Background-A').fadeOut(500, 'swing');
$("#Login").animate({marginTop:'100px'}, 500, 'swing', function(){
$('#Login').css('margin-top','0px');
});
});
感谢你们的帮助:)
这就是我在评论中所说的:
您应该尝试在
fadeOut
之后将margin
重置为initial
值。
示例:
$('.Black-Background-A').click(function(){
$('.Black-Background-A').fadeOut(1000, 'swing');
$("#Login").animate({marginTop:'+=50px'}).fadeOut(500, 'swing', function() {
$('.Black-Background-A').css('display','initial');
$(this).css('display', 'initial');
$(this).css('margin-top', 'initial');
});
});
在这里,我只是在动画和fadeOut操作完成后,将更改后的CSS重置为原始状态。这将导致更平滑的过渡。
我给你做了一把能用的小提琴。
这是一个拖延和缓和的问题。你的淡入比你的移动持续的时间更长。宽松的"线性"政策比"摇摆"政策更可取(我的观点)。查看我使用的CDN轻松库;)
https://jsfiddle.net/Bes7weB/7chyzv2L/
$('#LoginShow').click(function(e){
$("#Login").css({'margin-top':'0px'});
$('.Black-Background-A').fadeIn(500, 'easeOutCubic',function(){
$("#Login").fadeIn(50, 'linear');
$("#Login").animate({'margin-top':'25px'},500,'easeInCirc');
});
});
$('.Black-Background-A').click(function(){
$('.Black-Background-A').fadeOut(1000, 'easeInCubic');
$("#Login").animate({'margin-top':'75px'},500,'easeOutCirc')
$("#Login").fadeOut(500, 'linear');
});