JCarousel 和 Cufon 不合作：动画让 cufon 消失答案

【问题标题】：JCarousel and Cufon aren't co-operating: animation makes cufon go awayJCarousel 和 Cufon 不合作：动画让 cufon 消失
【发布时间】：2010-11-12 00:07:42
【问题描述】：

我将 cufon 与 jCarousel 一起使用。

轮播中有五个项目，并且从右向左旋转——换句话说，它们离开屏幕向左。你可以在这里看到它。

http://www.foursquare.org/site/test

如果我让轮播保持默认行为，它会到达第 5 张幻灯片，然后快速滑回右侧，一切正常显示。

如果我将轮播设置为“圆形”，则 cufon 标题会在第一次旋转后消失；即，当第一张幻灯片附加到最后一张幻灯片的右侧时，它们不会随幻灯片的其余部分一起提供。

您知道我可以做些什么来让 jCarousel 和 Cufon 合作或交流，以免在这种情况下头条新闻消失吗？

TTFN 特拉维斯

【问题讨论】：

标签： jquery animation jcarousel cufon

【解决方案1】：

如果您的 jcarousel 自动旋转，您需要将 Cufon.Refresh() 附加到动画函数。

对于我们的轮播，我们在 jcarousel 上使用了“itemVisibleOutCallback”参数，并将 Cufon.Refresh() 附加到“onAfterAnimation”调用中。

这是一个例子：

jQuery('#myCarousel').jcarousel({
        scroll: 1,
        wrap: 'circular',
        animation: 1500,
        auto: 7,
        itemVisibleOutCallback: {
            onBeforeAnimation: carouselAnimateStart
        }
    });

function carouselAnimateStart(){
    Cufon.refresh();
}

亚历克斯

【讨论】：

【解决方案2】：

我在使用 coda-slider 的变体时遇到了这个问题。似乎对我有用，而不是使用

visibility:hidden

我用过

display:none

和

display:block

揭示。

【讨论】：

【解决方案3】：

我最终做的是每次轮播移动到下一个项目时，我都会调用 Cufon.replace 函数，以便它为相关文本重新渲染 cufon。

I.E.

$(document).ready(function(){
  $j('.jcarousel-prev').click(function(e){
    Cufon.replace('li.jcarousel-item h3');
  });
  $j('.jcarousel-next').click(function(e){
    Cufon.replace('li.jcarousel-item h3');
  });
});

但是，我在 IE 中使用 jCarousel 有我自己的问题，它似乎在我使用上述 jQuery 代码的隐藏轮播项目上双重写入 cufon。如果有人遇到并解决此问题，那将非常有帮助。如果我事先找到修复程序，我会在这里发布:)

【讨论】：

我自己也一直在为此苦苦挣扎。我一直在尝试大量疯狂的解决方法（比如在替换之前删除所有 Cufon 元素），但我仍然得到了加倍的效果。有趣的是，您说它发生在隐藏物品上 - 我认为这是创建新元素的症状，但这更有意义。如果我发现任何有趣的事情，我会回来报告
不，我对隐藏元素的评论是错误的。您是正确的，它仅在您创建新元素时起作用。不幸的是，由于我无法找到解决方法，我必须更改 jCarousel 以便它不会循环，而是在左侧或右侧条目的末尾停止。可耻，但至少它现在适用于所有浏览器......

【解决方案4】：

在 jCarousel lite 我使用以下代码：

beforeStart: function() {

    Cufon.refresh();

},
afterEnd: function() {

    Cufon.refresh();            

}

现在似乎很奏效——但我目前只在 Mac 上的 Firefox 中进行了测试。不过谢谢你的帖子。它帮助了我，我希望这对其他人有所帮助。

干杯，迈克尔。

【讨论】：

【解决方案5】：

Alex 有一个好主意，但您无法在每个 itemVisibleOutCallback 处刷新所有 cufon 对象。这将给你一个slooooowdown。

再想一想，当您单击“下一步”按钮时，Cufon 会刷新每个在页面加载时发生变化的元素 - 那么某些浏览器可能会遇到问题。

所以正确的解决方案是只替换特定元素，你可以这样做：

$("#carousel").jcarousel({
    itemVisibleOutCallback: {
        onBeforeAnimation: function() {
            Cufon.replace("#carousel h2, #carousel li > div > a", {fontFamily: 'YourFont', hover: true});
        }
    }
});

【讨论】：