Question

我有一个隐藏在主要内容右侧的“绝对定位”部分。选择菜单后，我将此部分设置为左侧的动画

mysection.stop().animate({
    left:'200px'
},2000,'easeOutBounce',function(){
    menuobj.css({
        borderLeft:'1px solid green',
        borderTop:'1px solid green',
        borderRight:'1px solid green',
        height:'-=1',
        width:'-=2'
    });
});

动画完成后，我为菜单添加了边框在我在该部分添加flex滑块之前，这非常有效。在该部分中添加jQuery flex滑块后，我在chrome中获得了奇怪的动画。但在Firefox中运行良好。以下是chrome的效果截图。 Before animation

During animation

在上面的图片中，该部分是灰色背景，我正在谈论为什么会这样？是否有针对webkit的特定攻击？

修改

我在高性能（插入图形卡）电脑中测试过，它完美无缺：o
那么，它是系统依赖的吗？我完全糊涂了。

Answer 1

首先，如果禁用弹性滑块，动画是否可以在Chrome中正常工作？

如果在没有移动区域内的柔性滑块的情况下确实可以正常工作，请尝试在将柔性滑块加载到适当位置之前等待动画完成。不确定这是否可行，因为我们还没有现成的测试版本。不过，我认为这是可能的。

如果有效，您可能也必须在之后禁用弹性滑块（当您希望动画区域消失时）。在动画区域内放置缩略图图像可以让您在动画时保持用滑块“填充”的外观。如果正确执行，用户将永远不会知道滑动仅在动画结束后才真正显示。

Answer 2

我对custom.js进行了一些更改，这些更改应用了一种解决方法。不是一个真正的解决方案，但看起来比目前更好。它在动画开始时隐藏了flexgallery，并在动画结束时将其淡化。

<强> custom.js

43: $('#nav li').click(function() {
44:     $('#ProjContent').hide(); // added
45:         var menuitem=$(this);

和

168: $('#ProjContent').hide(); // added
169:     maincontent.animate({top:0},2000,'easeOutBounce',function(){
170:         $('#ProjContent').fadeIn(250); // added

动画在FF中工作但在chrome中效果不佳

2 个答案: