Javascript 在jQuery中翻页时如何防止文本模糊

当我使用jQuery翻页时，页面中的文本变得模糊

这是我用来翻页的功能：

$('#book').turn({
    display: 'double',
    autoCenter: true,
    acceleration: true,
    elevation: 150,
    page: nrPage,
    when: {
        first: function (e, page) {
            $('.nav_arrow.prev').hide();
        },

        turned: function (e, page) {

            if (page > 1) {
                $('.nav_arrow.prev').fadeIn();
                $('#about').hide();
            }
            if (page == 1) {
                $('#about').css('z-index', 11);
            }
            if (page < $(this).turn('pages')) {
                $('.nav_arrow.next').fadeIn();
            }
            update_fonts();
            $(this).setPage(page);
        },
        turning: function (e, page) {

            if (page < 2) {
                $('#about').show();
            } else {
                $('#about').css('z-index', 5);
            }
        },

        last: function (e, page) {
            $('.nav_arrow.next').hide();
        }
    }
});

$（'#book'）。转身({
显示：“双”，
自动中心：对，
加速度：是的，
标高：150，
页码：nrPage，
当：{
第一：功能（e，第页）{
$（'.nav_arrow.prev'）.hide（）；
},
翻页：功能（e，第页）{
如果（第1页）{
$（'.nav_arrow.prev'）.fadeIn（）；
$（'#about'）.hide（）；
}
如果（第==1页）{
$（'#about'）.css（'z-index'，11）；
}
如果（第<$（本页）。翻（'pages'））{
$（'.nav_arrow.next'）.fadeIn（）；
}
更新字体（）；
$（此）.setPage（第页）；
},
翻页：功能（e，第页）{
如果（第2页）{
$（'#about'）.show（）；
}否则{
$（'#about'）.css（'z-index'，5）；
}
},
最后：功能（e，第页）{
$（'.nav_arrow.next'）.hide（）；
}
}
});

---

需要一些指导以确保文本不会变得模糊。非常感谢您的帮助。谢谢。

Webkit支持一些非标准的专有版本：

因此，当使用

抗锯齿

而不是标准的

亚像素抗锯齿

时，这可能对webkit浏览器有所帮助。不确定在其他浏览器中可以做什么，因为这是非标准的，并且在任何其他浏览器中都不支持

您没有包括

turn（）

，但是如果您正在进行三维变换，现代浏览器会将计算任务移交给图形卡，这可能会返回更好的结果，因此使用任何变换的三维形式也可能会改善结果：

#elem{
   /* instead of: */
   transform: translateX( 20px );
   /* do this: */
   transform: translate3d( 20px, 0, 0);
}

---

我知道这篇帖子已经很老了，尽管有人仍在寻找这条信息：）

---

您应该将加速度设置为false。这应该可以解决问题。

你能在jsfiddle.net上设置一个例子吗？文本是图像还是真实文本？虽然我不能完全确定，但我怀疑你能阻止它。您必须记住，字体会不断地重新计算，这就是为什么字体在转换时不会抗锯齿的原因。一旦动画停止，它将再次被抗锯齿。@Christoph非常感谢。我添加了一个自定义字体，它在转换时显示模糊。如何避免这种情况？有什么想法吗？

#elem{
   /* instead of: */
   transform: translateX( 20px );
   /* do this: */
   transform: translate3d( 20px, 0, 0);
}