Javascript 在为其兄弟设置动画后，徽标将变得像素化

我正在处理一个项目，它的薄标题是动画，动画是：当用户展开侧面板时，它占据屏幕的一半，标题收缩到下半部分

现在的问题是，当我将标题动画化为屏幕的一半时，徽标会变得像素化，我不知道为什么

此问题仅适用于webkit浏览器[chrome/Safari]

这是一个显示问题的视频

HTML

<div id="topBar" class="clearfix">
    <a class="logo pull-left" href="index.html"><img src="images/logo.png" alt=""/>Three.js Project</a>

    <ul class="topControls clearfix pull-right">
        <li class="pull-left"><i class="fa fa-camera-retro"></i>View
            <select name="" id="">
                <option value="">Normal</option>
                <option value="">Back</option>
                <option value="">Inside</option>
            </select>
        </li>
        <li class="pull-left"><a href="#"><i class="fa fa-gear"></i>Settings</a></li>
        <li class="pull-left"><a href="#"><i class="fa fa-floppy-o"></i>Save</a></li>
        <li class="pull-left"><a href="#"><i class="fa fa-calculator"></i>Calculator</a></li>
        <li class="pull-left"><a href="#"><i class="fa fa-lightbulb-o"></i>Help</a></li>
    </ul>
</div>

JS

$(document).on('click', '#sceneCategoriesToggle', function () {
    var $sceneCategories = $('#sceneCategories'),
        sceneCategoriesWidth = $sceneCategories.outerWidth(),
        isExpanded = $sceneCategories.hasClass('expanded'),
        $relativePanel = $('#bottomPanel, #topBar .topControls');

    if (isExpanded) {
        $sceneCategories.animate({right: -sceneCategoriesWidth}, function () {
            $sceneCategories.removeClass('expanded');
        });
        $relativePanel.animate({right: 0});
        $('.detailsContent .closeBtn').click();
    } else {
        $sceneCategories.animate({right: 0}, function () {
            $sceneCategories.addClass('expanded');
        });

        $relativePanel.animate({right: sceneCategoriesWidth});
    }
});

---

谢谢。

我通过使用另一个小图像作为徽标解决了这个问题，原始图像是

200px X 200px

，徽标是

20px X 20px

，因此我使用了一个小图像，解决了问题

$(document).on('click', '#sceneCategoriesToggle', function () {
    var $sceneCategories = $('#sceneCategories'),
        sceneCategoriesWidth = $sceneCategories.outerWidth(),
        isExpanded = $sceneCategories.hasClass('expanded'),
        $relativePanel = $('#bottomPanel, #topBar .topControls');

    if (isExpanded) {
        $sceneCategories.animate({right: -sceneCategoriesWidth}, function () {
            $sceneCategories.removeClass('expanded');
        });
        $relativePanel.animate({right: 0});
        $('.detailsContent .closeBtn').click();
    } else {
        $sceneCategories.animate({right: 0}, function () {
            $sceneCategories.addClass('expanded');
        });

        $relativePanel.animate({right: sceneCategoriesWidth});
    }
});