jQuery ScrollTo Отключение <a>якорей в анимации

Question

Я использую плагин jQuery Ariel Flesler ScrollTo.Все отлично, за исключением того, что при прокрутке анимация перетаскивает курсор по некоторым ссылкам, которые, имея триггеры :hover, вызывают кратковременное зависание анимации.Есть ли шанс, что кто-нибудь знает, как отключить элементы: функции наведения во время анимации?

Answer 1

Когда вы говорите, что ссылки имеют «триггеры :hover», вы имеете в виду, что определили правило CSS :hover или привязали функцию JavaScript к событию наведения?

Если это CSS, какие свойства вы устанавливаете, что приводит к зависанию (я не могу воспроизвести зависание на своем компьютере простым изменением размера шрифта).Насколько я могу судить, вы не можете предотвратить CSS :hover.

Если это JavaScript, не можете ли вы просто отменить привязку события перед вызовом ScrollTo?

Было бы полезно немного подробнее или привести пример.

Редактировать:

Хорошо, в ответ на ваш комментарий, по сути, вам придется unbind тот mouseenter и mouseleave события перед использованием scrollTo:

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

Демо

Посещать http://demos.flesler.com/jquery/scrollTo/#target-examples и запустите следующий код в Firebug.

Затем вы можете нажать ссылку «Проверить прокрутку», чтобы проверить код.Вы должны увидеть, что браузер не зависает при наведении курсора мыши на остальные ссылки.

Когда прокрутка прекратится, вы можете нажать на любую из ссылок «возврат», и она прокрутится назад, за исключением того, что на этот раз события наведения не будут отменены, поэтому браузер должен зависнуть.

Примечание: Никакого зависания я не испытал вообще.Возможно, вы используете медленный компьютер или более старую версию jquery?Дайте мне знать, работает ли демо-версия так, как ожидалось.

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