Question

对于这个项目，我有一个盒子（div），带有一些静态内容（包括标签）和内容，可以在各种条件下更改（点击，悬停和计时器）。每个动态内容视图都位于一个单独的div中。

我正在尝试编写一个可以处理所有这些情况的函数，包括页面的初始加载，因为所有动态内容最初都是用css隐藏的。此函数采用父框，必须修改该框以跟踪事物，以及我希望更改的视图。

所以，我首先淡出所有视图，确保没有任何内容，并淡化新视图。我很快意识到回调没有按顺序工作，所以我遇到了promise（）函数。不幸的是，这会在我尝试过的每个浏览器中产生闪烁（IE，Chrome和Firefox）。在Chrome中，它只是经常发生，但在其他情况下它只是不变的。

$(container).children('.content_view').fadeOut(transition);
$(container).children('.content_view').promise().done(function() {
    $(next).fadeIn(transition);
});

这是我目前代码的业务结束。有没有更好的方法来做到这一点，或者某种方法来消除闪烁？不幸的是，这个页面主要是在行为不当的浏览器中查看。

在玩弄延迟之后，我怀疑问题是时间问题。过早删除元素或另一个元素的外观会导致我的布局暂时改变，直到达到最终布局。我怀疑promise（）函数实现了这样的延迟。

编辑：

我找到了一个似乎对我有用的解决方案。由于我最初的淡出是为了处理多个视图以某种方式变得不被隐藏的事件（由于其他原因发生了很多，使用mouseenter和mouseleave而不是mouseover和mouseout）我决定尝试立即杀死会更好任何正在从之前的通话中消失的事情，然后做我的常规褪色：

$(container).children('.content_view').filter(function(){return ($(this).css('opacity') < 1)}).each(function() {
    $(this).stop();
    $(this).css('opacity',0);
    $(this).css('hidden','none');
});

if ($(container).children('.content_view').filter(function(){return ($(this).css('display') != 'none');}).length > 0)
    $(container).children('.content_view').filter(function(){return ($this.css('display') != 'none';}).fadeOut(transition, function() {
    $(content).fadeIn(transition);
});
else
    $(content).fadeIn(transition);

希望这是有道理的。之前我不知道过滤功能。非常方便:)）

请注意，在我的情况下，这是有效的，因为这是任何内容交换的唯一方式，并且它只会在每次调用结束时让一个元素树完全可见（或到达那里）。如果尚未完成下一个显示，它会立即被杀死并被替换。

Answer 1

这应该有效：

$(container).children('.content_view').fadeOut(transition, function() {
    $(next).fadeIn(transition);
});

然后尝试：

$(container).children('.content_view').each(function(){
    $(this).fadeOut(transition, function() {
        $(next).fadeIn(transition);
    });
});

然而，最好的解决方案可能是使用CSS转换。这有可能吗？在什么浏览器上必须工作？

JQuery：淡出多个对象后淡入导致闪烁

1 个答案: