$('.drop1').css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0}, 200);

为什么使它如此困难，而不是动画css，你可以使用默认的淡入淡出功能

$('.drop1').fadeIn(200);
$('.drop1').fadeOut(200);

编辑

如果你想在不丢失高度的情况下淡出它，你可以使用fadeTo(duration, opacity, [callback]);

$('.drop1').fadeTo(200, 0);

检查以下示例：http://jsfiddle.net/ufLwy/1/

我也有类似的问题，这是我最后做的。

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 )
    ).done( function(){
        $( selector ).css('visibility', 'hidden')
        complete();
    });
}

我这么做的原因是

1. fadeIn()/fadeOut()使用'display'，其中F代表元素的高度
2. fadeTo不会影响visibility，因此，虽然元素在视觉上以opacity：0隐藏，但用户仍然能够与不可见元素交互（即单击）。
3. animate()是异步的，因此在结尾链接CSS并不保证它会在动画完成时执行。只有使用动画传回的Deferred对象（$.when()/$.done()），才能保证CSS会在***所有***动画完成后套用。
   EDIT或者，你可以在每个元素的动画完成后，对每个元素应用visibility:hidden。这对于选择更大的元素组可能会稍微快一些，因为你只需要在DOM中查询一次元素组。

$.fadeToHidden = function ( selector, duration, complete ) {
    $.when(
        $( selector ).fadeTo( duration, 0 , function(){ 
            $(this).css('visibility', 'hidden');
        } )
    ).done( complete );
}

我也遇到过类似的问题，我是这样解决的：
要淡入：

$("#id").css({visibility:"visible", opacity: 0.0}).animate({opacity: 1.0},200);

要淡出：

$("#id").animate({opacity: 0.0}, 200, function(){
    $("#"+txtid).css("visibility","hidden");
});

正如您所看到的，动画结束后我隐藏了div“#id”。

我知道这是一个老职位，但我遇到了类似的情况，这就是我结束了这样做

$(".drop1").css("visibility", "visible").show().fadeOut(5000);

.drop1{ opacity: 0.0; }

$('.drop1').fadeTo( "slow" , 1.0);