JCarousel and Cufon aren't co-operating: animation makes cufon go away

问题

I'm using cufon with jCarousel.

The Carousel has five items in it and rotates right to left -- they go off the screen to the left, in other words. You can see it here.

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

If I leave the carousel on default behavior, it gets to the 5th slide and then slides back to the right fast, and everything displays properly.

If I set the carousel to 'circular', the cufon headlines disappear after the first rotation; i.e. they don't come with the rest of the slide when the first slide gets appended to the right of the last slide.

Do you know what I can do to get jCarousel and Cufon to co-operate or communicate so that the headlines don't disappear in this situation?

TTFN Travis

回答1:

What I ended up doing was everytime carousel moved to the next item, I called the Cufon.replace function so that it re-renders the cufon for the relevant text.

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');
  });
});

However, I have my own problem with jCarousel in IE where it seems to double write the cufon on hidden carousel items where I use the above jQuery code or not. If anyone comes across and fixes this issue, it would be very helpful. If I find the fix beforehand, I will post on here :)

回答2:

If you have your jcarousel rotating automatically you need to attach the Cufon.Refresh() to an animation function.

For our carousel we used the 'itemVisibleOutCallback' parameter on jcarousel and attached the Cufon.Refresh() to the 'onAfterAnimation' call.

Here's an example:

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

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

Alex

回答3:

I ran into this problem with a variation of coda-slider. What seemed to work for me, instead of using

visibility:hidden

I used

display:none

and

display:block

to reveal.

回答4:

In jCarousel lite I use the following code:

beforeStart: function() {

    Cufon.refresh();

},
afterEnd: function() {

    Cufon.refresh();            

}

Seems to work a treat now - but I have as yet, only tested in Firefox on a Mac. Thanks for your post though. It helped me out and I hope this helps someone else out.

Cheers, Michael.

回答5:

Alex had a good Idea but You cant refresh your all cufon objects at every itemVisibleOutCallback. What this will give You is a slooooowdown.

Think again, when you click "next" button and Cufon refreshed every single element that has transformed on page load - then some browsers might have problem with that.

So the proper solution is to replace specific elements only, you can do it like this:

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

来源：https://stackoverflow.com/questions/4160494/jcarousel-and-cufon-arent-co-operating-animation-makes-cufon-go-away

标签

jquery

animation

jcarousel

cufon