jQuery ScrollTo Disabling <a>nchors on animation

Question

Hi Everyone!

I am using Ariel Flesler's ScrollTo jQuery plugin. Everything is great except when scrolling, the animation drags the cursor over some links which, having :hover triggers, cause a momentary hang up in the animation. Any chance anyone knows how to disable elements :hover functions while the animation is happening?

Answer 1

When you say the links have ":hover triggers", do you mean you've defined a CSS :hover rule or that you've bound a JavaScript function to the hover event?

If it's CSS, what properties are you setting that causes the hanging (I can't duplicate the hanging on my machine with a simple font-size change). As far as I can tell, you can't prevent a CSS :hover.

If it's JavaScript, can't you just unbind the event before calling scrollTo?

A little more elaboration or an example would be useful.

Edit:

Okay, in response to your comment, basically you have to unbind the mouseenter and mouseleave events before you use scrollTo:

$(...).unbind('mouseenter mouseleave');

Demo

Visit http://demos.flesler.com/jquery/scrollTo/#target-examples and run the following code in Firebug.

You can then click on the "test scroll" link to test the code. You should see that the browser does not hang when the mouse hovers over the rest of the links.

When the scrolling stops you can click on any of the "go back" links and it will scroll back, except this time it will not unbind the hover events, so you the browser should hang.

Note: I did not experience any hanging at all. Are you using a slow computer or an older version of jquery perhaps? Let me know if the demo works as expected.

/*
  Inject some CSS to add a background to the elements we
  are going to hover over and increase the font-size to 
  make the hover area bigger.
*/
$('head').append('<style type="text/css"> .back { font-size:3em!important; background-image:url(http://imgs.xkcd.com/comics/useless.jpg); background-repeat:no-repeat; } </style>');

/*
  Setup the hover events -- change the backgroundPosition
  and fade the elements in and out.
*/
function hoverOn() {    
  $(this)
    .css('backgroundPosition','-95px -210px')
    .fadeTo('normal', 1);
}

function hoverOff(){
  $(this)
    .css('backgroundPosition','-260px -110px')
    .fadeTo('normal', 0.5);
}

// Set the default opacity and bind the hover events
$('.back').not('#pane-target a:first')
  .css('opacity', 0.5)
  .hover(hoverOn, hoverOff);

// Modify the first link so that we can use it to trigger the scroll.
$('#pane-target a').eq(0)
  .css('backgroundImage', 'none') // Remove the backgroundImage for clarity
  .unbind('click') // unbind the old "go back" behaviour
  .text('test scroll')
  .click(function(){ 

    // unbind the hover events so that they don't hang the browser
    $('.back').not('#pane-target a:first')
      .unbind('mouseenter mouseleave');

    $('#pane-target').scrollTo(
      'li:eq(5)',
      800,
      {onAfter:function(){
        // re-bind the hover events
        $('.back').not('#pane-target a:first').hover(hoverOn, hoverOff);
      }}
    );

    return false;
  });