jQuery ScrollTo Disabilitando < a > nchors sull'animazione

Question

Sto usando il plugin ScrollTo jQuery di Ariel Flesler. Tutto è eccezionale tranne che durante lo scorrimento, l'animazione trascina il cursore su alcuni collegamenti che, avendo: il trigger si innesca, causano un momentaneo blocco nell'animazione. Qualche possibilità che qualcuno sappia disabilitare gli elementi: il passaggio del mouse funziona mentre l'animazione sta accadendo?

Answer 1

Quando dici che i link hanno ": hover innesca " ;, vuoi dire che hai definito una regola CSS: hover o che hai associato una funzione JavaScript all'evento hover?

Se si tratta di CSS, quali proprietà stai impostando per causare l'impiccagione (non riesco a duplicare l'impiccagione sulla mia macchina con una semplice modifica della dimensione del carattere). Per quanto ne so, non puoi impedire un CSS: hover.

Se è JavaScript, non puoi semplicemente separare l'evento prima di chiamare scrollTo?

Sarebbe utile un po 'più di elaborazione o un esempio.

Modifica

Ok, in risposta al tuo commento, in pratica devi separare gli eventi mouseenter e mouseleave prima di usare scrollTo :

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

Demo

Visita http://demos.flesler.com/jquery/scrollTo/# target-example ed esegui il seguente codice in Firebug.

Puoi quindi fare clic su " test scroll " link per testare il codice. Dovresti vedere che il browser non si blocca quando il mouse passa sopra il resto dei collegamenti.

Quando lo scorrimento si interrompe, puoi fare clic su una delle opzioni " torna indietro " link e scorrerà indietro, tranne che questa volta non separerà gli eventi al passaggio del mouse, quindi il browser dovrebbe bloccarsi.

Nota: non ho riscontrato alcun impiccagione. Stai forse usando un computer lento o una versione precedente di jquery? Fammi sapere se la demo funziona come previsto.

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