Javascript 带有动画的jQuery css可见性

jQuery css Visibility with animation

提问by jQuerybeast

I have few div's placed underneath each other and I'm using css visibility to fade them in and out. The reason why I use visibility is so that the div's don't move place.

我有几个 div 放在彼此下面，我正在使用 css 可见性来淡入和淡出它们。我使用可见性的原因是 div 不会移动位置。

For fade In I'm using:

对于淡入我正在使用：

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

and for fade Out I'm using:

对于淡出我正在使用：

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

The FadeIn works, but the fadeOut doesn't work.

该淡入工作，但淡出不起作用。

Now, you may think that the problem is the last ',200' but I will need to use that as a delay since the fadeout/visibility:hidden is on mouseleave event after 200ms.

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

So my question is: How can I do the visibility hidden with animation to act as a fadeOut.

所以我的问题是：如何将动画隐藏的可见性用作淡出。

Thanks alot

非常感谢

回答by Blazemonger

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

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

回答by Sander

why make it so hard, instead of animating the css, you could use the default fade functionality

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

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

edit

编辑

if you however want to fade it out without losing the height . you can use fadeTo(duration, opacity, [callback]);

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

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

check this example: http://jsfiddle.net/ufLwy/1/

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

回答by hypno7oad

I was having similar issues, and here's what I ended up doing.

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

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

The reason I did this is that

我这样做的原因是

1. fadeIn()/fadeOut() uses 'display' which F's up an element's height
2. fadeTo doesn't affect 'visibility', so while the element is visually hidden with opacity:0users are still able to interact (i.e. click) the invisible element
3. animate() is asynchronous so chaining CSS at the end doesn't guarantee that it will run when the animation is complete. Only by using the Deferred object that animations return ($.when() / $.done()) will you be guaranteed that the css is applied after allanimations are complete.

1. FadeIn()/fadeOut() 使用“显示”，F 是元素的高度
2. 淡入淡出不影响“可见性”，所以虽然元素在视觉上隐藏起来不透明度：0用户仍然能够交互（即单击）不可见元素
3. animate() 是异步的，所以最后链接 CSS 并不能保证它会在动画完成时运行。只有使用动画返回的延迟对象 ($.when() / $.done()) 才能保证在所有动画完成后应用 css 。

EDIT Alternatively, you could apply to "visibility:hidden" to each individual element once their respective animation is complete. This may be slightly quicker for selecting larger groups of elements, since you're only querying the DOM for the group of elements once.

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

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

回答by Miguel Higuera Romero

I had a similar problem and I solved it this way:

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

To fade in :

淡入：

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

To fade out:

淡出：

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

As you can see, I hide the div "#id" once the animation has ended. I hope it's not too late

如您所见，动画结束后我隐藏了 div "#id"。我希望现在还不算太晚

回答by codingforpassion

I know this is an old post but I came across a similar situation and this is what I ended up doing

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

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

回答by Scott Cleland

.drop1{ opacity: 0.0; }

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