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

对于这个项目，我有一个盒子（div），其中包含一些静态内容（包括制表符）和可以在各种条件下更改的内容（点击，悬停，和定时器）。这些动态内容视图中的每一个都位于独立的div中。JQuery：在淡出多个对象后淡入导致闪烁

我想写一个函数，可以处理所有这些情况，包括页面的初始加载，因为所有的动态内容最初都隐藏在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);

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

请注意，在我的情况下，这是有效的，因为这是任何内容交换的唯一方式，它只会留下一个元素树完全可见（或到达那里）在每个呼叫。如果下一个还没有完成，它会立即死亡并被取代。

来源

2012-04-11 user1215288

你可以放在一起复制这个JSFiddle？ – Jon 2012-04-11 11:43:43

我在努力。噢亲爱的。似乎崩溃了很多：P – user1215288 2012-04-11 12:05:33

这应该工作：

$(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-11 11:40:15 Gavriel

这是我的第一个想法，但由于选择器匹配多个元素，回调函数立即执行。 – user1215288 2012-04-11 11:48:36

好的，我添加了一些其他的东西。哪个选择器是问题？ .content_view或$（next）？ – Gavriel 2012-04-11 11:56:53

$（next）就是我传入的对象。它表示我希望插入的根元素。该元素属于content_view类，所有其他视图都可以选择。这里的第二种解决方案导致奇怪的闪烁效果，它与初始淡入淡出效果重叠。第三个是相同的，但似乎将内容视图留在了我从未要求的位置。我假设next（）移动到下一个兄弟节点？这可能会导致这种行为 – user1215288 2012-04-11 12:02:27

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

回答

相关问题