可见 div 的平滑 jQuery 动画

Question

我有一个隐藏的 div，里面装满了内容，当你点击另一个 div 时会显示出来。单击的 div 必须淡出，因此隐藏的 div 不会“跳入”，它显示如下：

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

但是 click-div 向下移动，然后 new-div 突然出现并“推动”click-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 } );