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

Question

我将 cufon 与 jCarousel 一起使用。

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

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

如果我将轮播保留为默认行为，到了第5张幻灯片，然后快速向右滑回，一切正常显示。

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

你知道我能做些什么来让 jCarousel 和 Cufon 合作或沟通，这样头条新闻就不会在这种情况下消失吗？

TTFN 特拉维斯

Answer 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();
}

亚历克斯

Answer 2

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

visibility:hidden

我使用

display:none

和

display:block 

来揭示。

Answer 3

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

IE

$(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。
如果有人遇到并解决这个问题，那将非常有帮助。如果我事先找到修复程序，我会在这里发布:)

Answer 4

在 jCarousel lite 中，我使用以下代码：

beforeStart: function() {

    Cufon.refresh();

},
afterEnd: function() {

    Cufon.refresh();            

}

现在似乎可以正常工作 - 但到目前为止，我只在 Mac 上的 Firefox 中进行了测试。不过还是谢谢你的帖子。它帮助了我，我希望这也能帮助其他人。

干杯，
迈克尔.

Answer 5

Alex 有一个好主意，但您无法在每个 itemVisibleOutCallback 上刷新所有 cufon 对象。
这会给你带来的是放慢速度。

再想一想，当您单击“下一步”按钮并且 Cufon 刷新了页面加载时已转换的每个元素时 - 那么某些浏览器可能会出现问题。

因此，正确的解决方案是仅替换特定元素，您可以这样做：

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