流畅的jQuery动画的可见div

Question

我有一个隐藏的div，填充内容，当你点击另一个div时可见。点击的div必须淡出，因此隐藏的div不会“跳入”，它显示如下：

1. 向下移动click-div
2. 淡入新div

但是click-div向下移动，然后new-div突然出现并且“推”点击div。这些是重要的路线：我的.galleryarea必须向下移动，.moreinfo-div必须显得平滑。

    $(".galleryarea").animate({ marginTop: '200px' }, 1500);
    $("#moreinfo").removeClass("hidden", 1500, "easeInBack");
    $("#moreinfo").animate({ opacity: 1 } );

真的希望有人有个主意！也可以随意看看整个小提琴：http://jsfiddle.net/mleyendecker/632Fw/150/

Answer 1

动画完成后删除marginTop：

$('.trigger').click(function () {
    $(".galleryarea").animate({
        marginTop: '240px' // Changed from 200 to 240 as 200 wasn't quite far enough
    }, 1500, function() {
        $(this).css('marginTop', 0) // <-- important piece
    });
    $('.dark').removeClass('dark');

    $("#moreinfo").removeClass("hidden", 1500, "easeInBack");
     $("#moreinfo").animate({ opacity: 1 } );