Question

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

Answer 1

jQuery.animate有一个“完整”回调，你可以使用它。 http://api.jquery.com/animate/

或者使用可以使用延迟对象http://api.jquery.com/jQuery.Deferred，对于这么多链式调用来说可能更容易。检查这个小提琴：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“一个接一个的动画”

1 个答案: