Question

我无法设置我的登录框动画。当我第一次加载页面时，动画效果很好。但是在第一次单击后，fadeIn可以工作，但动画却没有。这是代码......

fadeIn

以下部分每次都使用fadeIn，但第二次触发animate部分有效但$('#LoginShow').click(function(e){ $('.Black-Background-A').fadeIn(1000, 'swing'); $("#Login").animate({marginTop:'25px'}).fadeIn(500, 'swing'); });无效。请查看：documentation

list-A

Answer 1

对我来说，您的原始代码正在运行，但您可能会出错，尝试将CSS文件拿出并再次检查该功能

＆＃13;

<!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>

＆＃13;

Answer 2

我已经弄清楚了...... 我必须在应用了fadeOut的动画中添加回调函数。这是代码......

$('#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');
    });
});

谢谢你们的帮助：）

Answer 3

当我说：

时，这就是我在评论中所说的

您应该尝试在margin之后将initial重置为fadeOut值。

示例：

$('.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重置为原始状态。这将导致更平滑的过渡。

Answer 4

我让你成为一个有用的小提琴。

这是一个延迟和缓和的问题。你的褪色持续时间比你的移动时间长。缓和“线性”优于“摆动”以获得淡入淡出（我认为）。检查我使用的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');
});

jQuery animate在点击时只能工作一次

4 个答案: