0

对于这个项目，我有一个框 (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);

希望这是有道理的。我以前不知道过滤器功能。很方便:)

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

4

1 回答 1

0

这应该工作：

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

然后尝试：

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

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

于 2012-04-11T11:40:15.320 回答