jQuery ScrollTo تعطيل المرساة في الرسوم المتحركة

Question

أنا أستخدم البرنامج المساعد ScrollTo jQuery الخاص بـ Ariel Flesler.كل شيء رائع باستثناء عند التمرير، تقوم الرسوم المتحركة بسحب المؤشر فوق بعض الروابط التي، مع تشغيل :hover، تتسبب في تعليق مؤقت في الرسوم المتحركة.هل من الممكن أن يعرف أي شخص كيفية تعطيل العناصر: وظائف التحويم أثناء حدوث الرسوم المتحركة؟

Answer 1

عندما تقول أن الروابط بها ": مشغلات hover"، هل تقصد أنك قمت بتعريف قاعدة CSS :hover أو أنك قمت بربط وظيفة JavaScript بحدث التحويم؟

إذا كان CSS، ما هي الخصائص التي تقوم بتعيينها والتي تسبب التعليق (لا يمكنني تكرار التعليق على جهازي بتغيير بسيط في حجم الخط).بقدر ما أستطيع أن أقول، لا يمكنك منع CSS :hover.

إذا كان جافا سكريبت، ألا يمكنك إلغاء ربط الحدث قبل استدعاء التمرير إلى؟

المزيد من التفصيل أو المثال قد يكون مفيدًا.

يحرر:

حسنًا، ردًا على تعليقك، عليك فعل ذلك بشكل أساسي 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;
  });