Question

使用fadeIn和fadeOut时的正常行为是使用the display property。但是，这会更改页面的布局。

如何让fadeIn和fadeOut不修改页面布局？

Answer 1

另外

而不是.fadeIn()你可以.animate({opacity:1})
而不是.fadeOut()你可以.animate({opacity:0})

Answer 2

您可以针对fadeOut尝试此操作：

$("something here").fadeOut("slow", function() {
    $(this).show().css({visibility: "hidden"});
});

...这适用于fadeIn：

$("something here").hide().css({visibility: "visible"}).fadeIn("slow");

Answer 3

使用fadeTo：

.fadeTo()方法为匹配元素的不透明度设置动画。它与.fadeIn()方法类似，但该方法取消隐藏元素并始终淡化为100％不透明度。

持续时间以毫秒为单位;值越高表示动画越慢，而动画越快。可以提供字符串'fast'和'slow'以分别指示200和600毫秒的持续时间。如果提供了任何其他字符串，则使用默认持续时间400毫秒。与其他效果方法不同，.fadeTo()要求明确指定duration。

如果提供，动画完成后将触发回调...

Answer 4

感谢10gler我的解决方案，使用可见性来防止隐形按钮点击等。

//fadeIn
$("#x")
    .css('visibility', 'visible')
    .fadeTo('fast', 1);

//fadeOut
$("#x")
    .fadeTo('fast', 0, function() {
        $(this).css('visibility', 'hidden');
    });

Answer 5

结合上述答案，这对我来说效果很好。您可以根据自己的喜好更改动画时间。

至fadeIn：

        $('selector').animate({opacity:1, visibility:'visible'}, 200);

至fadeOut：

        $('selector').animate({opacity:0, visibility:'hidden'}, 200);

确保在开始时设置visibilty:'hidden'和opacity:0以避免在默认显示被隐藏时第一次淡入时突然弹出，否则它不重要。

        $('selector').css({opacity:0, visibility:'hidden'});

在不改变页面布局的情况下淡入淡出元素

5 个答案: