jQuery动画仅在单击时起作用一次
[英]jQuery animate works only once on click
问题描述
我在设置登录框动画时遇到麻烦。 当我第一次加载页面时，动画效果完美。 但是在第一次单击后，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起作用，但是第二次触发fadeIn部分起作用，但是animate部分则fadeIn 。 在以下位置检查： http ： //www.farrislab.net
$('#LoginShow').click(function(e){
$('.Black-Background-A').fadeIn(1000, 'swing');
$("#Login").animate({marginTop:'25px'}).fadeIn(500, 'swing');
});
4 个解决方案
解决方案1
0 2016-05-02 01:45:17
对我来说，您的原始代码正在运行，但是您可能出错了，请尝试找出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>
解决方案2
0 2016-05-02 15:52:11
我已经弄清楚了...我必须在应用fadout的动画中添加一个回调函数。 这是代码...
$('#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');
});
});
谢谢你们的帮助:)
解决方案3
0 2016-05-02 16:52:02
这就是我在评论中所说的：
您应该尝试在
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重置为其原始状态。 这将导致更平滑的过渡。
解决方案4
0 2016-05-02 17:53:43
我给你做了个小提琴。
这是一个延迟和放松的问题。 淡入淡出的持续时间长于运动的持续时间。 并且缓和的“线性”比“摆动”更适合于淡入淡出（我认为）。 检查我使用的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 click只工作一次
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.