我正在尝试在上一个动画发生后对一系列 div 进行动画处理。我试图将 .mouseenter 和 .mouseleave 调用到动画为不透明度的相同 div: 1. 第一个动画似乎取代了之后更改不透明度的任何尝试。我对编程完全陌生,我正在寻找这个问题的答案。我尝试了一些似乎与我的特定问题相关的解决方案,但总是出现语法错误。
代码如下。我已注释掉第二次无效的不透明度更改尝试 (.fadeTo),但这不是我尝试的唯一方法:
$(document).ready(function(){
$('#work').click(function(){
$('#portfolio').animate({'margin': '120px 0px 0px 890px','opacity':'1'}, 500);
$('#sketchbook').animate({'margin': '120px 0px 0px 1045px', 'opacity':'1'}, 550);
$('#art').animate({'margin': '120px 0px 0px 1200', 'opacity':'1'}, 600);
$('#bio').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 600);
$('#blog').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 550);
$('#inspiration').animate({'margin': '120px 0px 0px 1045', 'opacity':'0'}, 500);
$('#bottom_bar').animate({'margin-top':'700px', 'height': '15px'},1000);
});
$('#about').click(function(){
$('#bio').animate({'margin': '120px 0px 0px 890px','opacity':'1'}, 500);
$('#blog').animate({'margin': '120px 0px 0px 1045px', 'opacity':'1'}, 550);
$('#inspiration').animate({'margin': '120px 0px 0px 1200', 'opacity':'1'}, 600)
$('#portfolio').animate({'margin': '120px 0px 0px 800px','opacity':'0'}, 300);
$('#sketchbook').animate({'margin': '120px 0px 0px 810px', 'opacity':'0'}, 350);
$('#art').animate({'margin': '120px 0px 0px 820', 'opacity':'0'}, 400);
});
});
//FADE IN / FADE OUT
//$('#portfolio').mouseenter(function(){
//$(this).fadeTo(.7, 'fast');
//});
最佳答案
jQuery.animate 有一个“完整”回调,例如您可以使用它。 http://api.jquery.com/animate/
或者使用可以使用延迟对象http://api.jquery.com/jQuery.Deferred ,对于如此多的链式调用来说可能会更容易。 检查这个 fiddle :http://jsfiddle.net/balintbako/8VAZ3/一个简单的延迟代码。
<div id="box"></div>
#box {
width: 200px;
height: 200px;
background-color: black;
}
$(document).ready(function () {
$('#box').animate({
'width': '100'
}, 200);
$('#box').animate({
'height': '100'
}, 200);
var def = $('#box').promise();
def.done(
function () {
alert('done');
});
});
关于jquery "one animation after another",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17127216/