> DEMO

Question

我想将visibility:hidden;设置为具有动画效果的元素。我得到了一些替代方案的建议，以下内容对我很有用：

$(updateSection+' .bubblingG').fadeOut(2000,function(){
                 $(updateSection).before(response.msg);
            });

但是在fadeOut display:none;设置为$（updateSection +'。。bubblingG'）之后;但我不想在fadeOut之后设置display:none;。有什么办法吗？

Answer 1

使用visibility很难做到这一点，但如果您使用opacity，则可以获得完全相同的效果：

.bubblingG.hidden {
    opacity:0;

}
.bubblingG {
    opacity:1;
    transition:opacity 2s linear;
}

$(updateSection+' .bubblingG').addClass('hidden');

Answer 2

var e = $(updateSection+' .bubblingG');
e.css({opacity: 1.0, visibility: "visible"})
 .animate({opacity: 0}, 200,function(){
      e.css({visiblity: 'hidden'})
       .css({opacity: 1.0});                                 
  });

<强>更新
将不透明度从 1.0 设置为 0 （完全透明），这与 fadeOut 具有相同的效果。然后你可以添加一个回调并自己设置 visibility：hidden; 。

Answer 3

如果您想创建自己的功能并确保 visibility属性已更改（请注意：这通常不是必需的！您确定需要这个吗？） ，您可以使用jQuery执行以下操作：

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

$.fadeToVisible = function(selector, duration) {
    $.when(
        $(selector).css('visibility', 'visible')
    ).done( function(){
        $(selector).fadeTo(duration, 1)
    });
}

var visible = 1;
$('#test').click(function() {
    if (visible == 1) {
        visible = 0;
        $.fadeToHidden($('#square'),500);
    } else {
        visible = 1;
        $.fadeToVisible($('#square'),500);
    }
});

用动画隐藏的可见性

3 个答案:

> DEMO