jQuery css与动画的可见性

Question

我有几个div放在彼此之下,我正在使用css可见性来淡入淡出它们.我使用可见性的原因是div不会移动到位.

对于淡入我正在使用:

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

为了淡出,我正在使用:

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

该淡入工作,但淡出不起作用.

现在,您可能认为问题是最后一个' ,200 '但我需要将其用作延迟,因为fadeout/visibility:hidden是在200ms之后的mouseleave事件.

所以我的问题是:如何通过动画隐藏可见性来充当fadeOut.

非常感谢

Answer 1

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

Answer 2

为什么要这么难,而不是动画css,你可以使用默认的淡入淡出功能

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

编辑

如果你想在不失高度的情况下淡出它.你可以使用fadeTo(持续时间,不透明度,[回调]);

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

查看此示例:http: //jsfiddle.net/ufLwy/1/

Answer 3

我遇到了类似的问题,这就是我最终要做的事情.

$.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',所以虽然元素在视觉上隐藏了不透明度:0用户仍然能够交互(即点击)不可见元素
3. animate()是异步的,因此最终链接CSS并不能保证它在动画完成时运行.只有使用动画返回的Deferred对象($ .when()/ $ .done())才能保证在所有动画完成后应用css .

编辑或者,一旦各自的动画完成,您可以对每个单独的元素应用"visibility:hidden".选择较大的元素组可能会稍微快一点,因为您只需要查询一次元素组的DOM.

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

Answer 4

我有一个类似的问题，我这样解决了：

淡入：

$("#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”。我希望不晚