带有动画的jQuery css可见性答案

【问题标题】：jQuery css Visibility with animation带有动画的jQuery css可见性
【发布时间】：2011-11-13 02:11:56
【问题描述】：

我有几个 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);

FadeIn 有效，但 fadeOut 无效。

现在，您可能认为问题出在最后一个“,200”，但我需要将其用作延迟，因为淡出/可见性：隐藏在 200 毫秒后发生 mouseleave 事件。

所以我的问题是：如何使动画隐藏的可见性充当淡出。

非常感谢

【问题讨论】：

标签： javascript jquery css animation visibility

【解决方案1】：

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

【讨论】：

这行得通，但如果你再次调用它，淡入淡出就会消失。我认为需要清除动画队列或其他什么？

【解决方案2】：

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

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

编辑

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

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

检查这个例子： http://jsfiddle.net/ufLwy/1/

【讨论】：

来吧，证明不赞成，这是一种比使用 animate 命令手动执行淡出更好的方法，如果不是，那么我在这里遗漏了一些东西，我想知道什么
fadeIn'ing out 使它不显示，因此你失去了它的高度，隐藏它的可见性在那里但不可见。在这里查看：jsfiddle.net/ufLwy
blazemonger 的解决方案也有效，但这个 fadeTo zero 解决方案更加优雅。
这将隐藏一个元素而不是使其不可见

【解决方案3】：

我遇到了类似的问题，这就是我最终要做的。

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

我这样做的原因是

fadeIn()/fadeOut() 使用“显示”，F 增加了元素的高度
fadeTo 不会影响“可见性”，因此当元素以 opacity:0 视觉隐藏时，用户仍然可以与不可见元素进行交互（即点击）
animate() 是异步的，因此最后链接 CSS 并不能保证动画完成后它会运行。只有使用动画返回的 Deferred 对象 ($.when() / $.done()) 才能保证在 all 动画完成后应用 css .

编辑或者，一旦它们各自的动画完成，您可以将“可见性：隐藏”应用于每个单独的元素。这对于选择较大的元素组可能会稍微快一些，因为您只需在 DOM 中查询一次元素组。

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

【讨论】：

【解决方案4】：

.drop1{ opacity: 0.0; }

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

【讨论】：

【解决方案5】：

我知道这是一篇旧帖子，但我遇到了类似的情况，这就是我最终要做的事情

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

【讨论】：

【解决方案6】：

我遇到了类似的问题，我是这样解决的：

淡入：

$("#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"。希望还不算太晚

【讨论】：

感谢@Miguel Higuera Romero 提供好的解决方案。它帮助我增加了动画的可见性。