jQuery ScrollTo Désactivation de < a > nchors sur une animation

Question

J'utilise le plugin ScrollTo jQuery d’Ariel Flesler. Tout est génial sauf lors du défilement, l'animation entraîne le curseur sur des liens qui, ayant: des déclenchements en survol, provoquent un blocage momentané de l'animation. Quelqu'un at-il une chance de savoir comment désactiver des éléments: survoler des fonctions pendant que l'animation se déroule?

Answer 1

Lorsque vous dites que les liens ont des "" hover triggers", voulez-vous dire que vous avez défini une règle CSS: hover ou que vous avez lié une fonction JavaScript à l'événement hover?

S'il s'agit de CSS, quelles propriétés définissez-vous qui provoque le blocage (je ne peux pas dupliquer le blocage de ma machine avec un simple changement de taille de police). Autant que je sache, vous ne pouvez pas empêcher un CSS: survolez.

S'il s'agit de JavaScript, ne pouvez-vous pas simplement dissocier l'événement avant d'appeler scrollTo?

Un peu plus d’élaboration ou un exemple serait utile.

Modifier:

OK, en réponse à votre commentaire, vous devez essentiellement dissocier les événements mouseenter et mouseleave avant d'utiliser scrollTo :

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

Démo

Visitez http://demos.flesler.com/jquery/scrollTo/# target-examples et exécutez le code suivant dans Firebug.

Vous pouvez ensuite cliquer sur le " test scroll " lien pour tester le code. Vous devriez voir que le navigateur ne se bloque pas lorsque la souris survole le reste des liens.

Lorsque le défilement s'arrête, vous pouvez cliquer sur l'un des boutons "revenir en arrière". des liens et il fera défiler en arrière, sauf que cette fois il ne sera pas dissocier les événements de survol, de sorte que le navigateur doit se bloquer.

Remarque: je n'ai rencontré aucune pendaison. Utilisez-vous un ordinateur lent ou une ancienne version de jquery peut-être? Faites-moi savoir si la démo fonctionne comme prévu.

/*
  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;
  });