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

【问题标题】：Fading elements in and out without changing the layout of the page在不改变页面布局的情况下淡入淡出元素
【发布时间】：2011-01-16 10:00:48
【问题描述】：

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

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

【问题讨论】：

标签： jquery css layout

【解决方案1】：

使用fadeTo:

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

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

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

【讨论】：

【解决方案2】：

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

致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'});

【讨论】：

【解决方案3】：

还有

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

【讨论】：

当您为不透明度设置动画时，点击元素仍会触发事件处理程序。使用visibility: hidden，事件不被触发。
@Jawa，是的，但可见性不是动画的，OP 想要淡入/淡出。（你可以在动画完成后添加visibility:hidden，通过callback参数来满足这两个需求）

【解决方案4】：

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

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

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

【讨论】：

感谢您的示例。效果很好。

【解决方案5】：

你可以试试这个fadeOut:

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

...这是fadeIn:

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

【讨论】：

不错。我试图做到这一点，但在让淡出工作时遇到了麻烦，但该回调可以解决问题。