3

我创建了一个效果，当屏幕上显示一行图标时运行。

动画本质上是改变paddinga 的div，从图标中产生脉冲的效果。

它在除 Chrome 之外的所有浏览器中都能完美运行（令人惊讶！）。由于某种原因，Chrome 在动画时会摆动每个图标下的文本。我使用padding是希望它只会影响div（使用box-sizing: border-box模型）中的内容。

我确实为它编写了一个在 Chrome 中工作的修复程序，但随后破坏了 Safari 中的布局。

所以我不确定我是否可以修复 Chrome 中的抖动，或者我是否可以改变我的修复来帮助 Safari。

这是当前页面的链接，没有 jQuery 修复。它在 JS 文件中，但被注释掉了。

这是运行动画的代码，修复在这里，只是注释掉了：

$('.wrapper').scroll(function(e) {

    var tTop = target.offset().top;
    var tTopOffset = tTop+target.height();

    if( tTop < height ) {

        if (flag) {

            targetDiv.animate({
                opacity: 1
            }, 500);


            targetDiv.each(function(i){

                // FIX breaks on safari, but fixes issue in Chrome...
                // targetDiv.css('height', targetDivHeight);

                $(this).delay((i++) * 900).animate({
                    padding: '0em'
                }, 400);


                $(this).animate({
                    padding: '0.5em'
                }, 400);

            }); 

            flag = false

        }


    } else {

        targetDiv.css('opacity', '0');
        flag = true;

    }

});
4

1 回答 1

5

我认为这是因为您没有指定要设置动画的元素的宽度和高度。边框框不只是忽略填充值，它需要包括填充和边框的宽度和高度值。如上所述，使用 transform:scale 可能会很好，但恕我直言，使用 .animate() 实现有点棘手，并且浏览器支持较少。

在控制台中尝试此操作并尝试修改您的代码。我试过了，它在最新的 Safari 和 Chrome 中运行良好。（应该使用 .outerHeight() 来获得正确的值，因为您使用填充值进行动画处理）

$ = jQuery;
var targetDiv = $('.icon-img-div');
var targetDivHeight = $('.icon-img-div').outerHeight();
var targetDivWidth = $('.icon-img-div').outerWidth();

targetDiv.each(function (i) {

    // this breaks on safari, but fixes issue in Chrome...
    targetDiv.css({
        height: targetDivHeight,
        width: targetDivWidth
    });

    $(this).delay((i++) * 900).animate({
        padding: '0em'
    }, 400);

    $(this).animate({
        padding: '0.5em'
    }, 400);

});
于 2013-10-25T14:25:58.020 回答