jquery"；一个接一个的动画；

我正在尝试在上一个动画发生后设置一系列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');
//});

animate有一个“完整”回调，例如，您可以使用它。

或者可以使用延迟对象，这对于如此多的链式调用可能更容易。 检查这个提琴：一个简单的延迟代码

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

#盒子{
宽度：200px；
高度：200px；
背景色：黑色；
}
$（文档）.ready（函数（）{
$（“#框”）。设置动画({
“宽度”：“100”
}, 200);
$（“#框”）。设置动画({
“高度”：“100”
}, 200);
var def=$（'#box'）.promise（）；
完成(
函数（）{
警报（“完成”）；
});
});

也许我在这里遗漏了什么，但肯定是（a）

$（“#box”）.animate（…）

返回

jQuery

，作为传递给

的参数。when（）

您需要

$（“#box”）.animate（…）.promise（）

。（b） 链接的jQuery动画会自动在fx队列中排队，因此不需要

。when（…）.done（…）

<代码>$（“#box”）.animate（…）.animate（…）就足够了（如果OP需要的话）。我肯定我会在一周左右回到这篇文章，理解延迟对象和/或你在编辑中说的话，但到目前为止，我还不知道这意味着什么。完整的回调确实有效，我目前正在使用它。谢谢@关于点b），你说得很对，但是如果第二个函数不是动画，那么它就不同了。现在关于a）点，代码是好的，因为动画功能已经解决了。此外，这个延迟的JS代码可能更接近使用它的标准方式：（a）如果您接受（b），那么这是学术性的，但是您还没有掌握关于

$（'#box'）。animate（…）

返回jQuery。jQuery不是承诺，因此

$。当（$（'#box'）.animate（…）

将立即解决，而不是在动画完成时解决。