jQuery animate只在单击时工作一次

jQuery animate works only once on click

本文关键字：一次 工作 animate 单击 jQuery      更新时间：2023-09-26

我在设置登录框的动画时遇到问题。当我第一次加载页面时，动画效果非常好。但在第一次单击后，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');
});
相关文章：