Question

im using Cufon with jCycle to create a carousel. I’d like the color of the links to change on a hover event. This works fine, but it has a little annoying delay of like 0.5seconds.

I’m already using cufon.refresh() but it doesn’t work properly enough.

Code i’m using:

(function($) {

    $(document).ready(function() {

        $('#homepage_slideshow').before('<div id="nav">').cycle({ 
            fx                  : 'fade', 
            pause               : 1,
            speed               : 'fast', 
            timeout             : 5000, 
            pager               : '#nav',
            slideResize         : false,
            containerResize     : false,
            pagerEvent          : 'mouseover', 
            fastOnEvent         : true,
            pause: 1,
            pagerAnchorBuilder: function(index, element) {
                  var title      = $('.slide_title a', element).remove().text();
                  var undertitle = $('.slide_title .undertitle', element).remove().text();

                  var atitle  = $('<a />').attr('href', '#').text(title);
                  var sutitle = $('<div class="undertitle" />').text(undertitle);
                  var div     = $('<div />').addClass('slideshow_tab');
                  var lnk     = $('.slide_img a', element);

                  div.append(atitle);
                  div.append(sutitle);

                  if (lnk.length) div.click(function(e) {
                      e && e.preventDefault();
                      window.location.href = $(lnk[ lnk.length - 1]).attr('href');
                  })
                  else {
                      div.css('cursor','default');
                      div.find('a').css('cursor','default');
                  };    

                  return div; 

            },

            after: function(){ Cufon.refresh('.slideshow_tab a'); }
        });

            Cufon.replace('.slideshow_tab a');

            Cufon.now(); 

    });

})(jQuery);

If anyone could help me out – I would really appreciete it.

Answer 1

It may be that your nested pageranchorbuilder function/code is run before the cycle “after” function is called. Try implementing your hover functionality more directly to get more direct action.

I was having the same performance issue and actually got pretty snappy results when I implemented .refresh within a jquery .hover and callback function.

$(".slidehow_tab a").hover(
    function () {
        $(this).addClass("hover");
        Cufon.refresh();
    },
    function () {
        $(this).removeClass("hover");
        Cufon.refresh();
    }
);