localscroll jQuery plugin - animation queueing problem_问答_开发者

localscroll jQuery plugin - animation queueing problem

开发者 https://www.devze.com 2023-03-09 19:37 出处：网络

I\'m using the popular jQuery scrollTo / localScroll plugin to create a single page navigation system that automatically scrolls the window to various anchor tags. I have it working no problem, but am

I'm using the popular jQuery scrollTo / localScroll plugin to create a single page navigation system that automatically scrolls the window to various anchor tags. I have it working no problem, but am having trouble preventing it from queueing animation.

I have an unordered list with an id of 'main_nav' which I am using to skip to the anchor points:

<ul id="main_nav"> 
  <li><a href="#one">One<a> </li> 
  <li><a href="#two">Two</a></li> 
  <li><a href="#three">Three</a> </li> 
  <li><a href="#four">Four</a> </li> 
</ul>

When calling the function, there is a parameter called 'stop' which is supposed to clear any currently queued animations via the jquery stop() function. The parameter defaults to 'true' in the plugin, but I have specified it anyway. The plugin also defaults to referencing the window as the target for scrolling. I am calling the function like so:

$(document).ready(function() {
  $('#main_nav').localScroll({
    duration:2000,
    stop:true
  });
});

This works, but the 'stop' parameter is ignored... if I click all four links in quick succession, the page will scroll to each link one after the other, taking a total of 8 seconds to do so. Not ideal! If I wrap the whole page in a container div, give it a height, and set it to overflow:scroll; and then target this div with the localScroll function, then the stop parameter works. eg, when called like this there is no more animation queueing:

$(document).ready(function() {
  $('#main_nav').localScroll({
    ta开发者_如何学Pythonrget: $('#container'),
    duration:2000,
    stop:true
  });
});

It seems that when the plugin references a div as the target to be scrolled, it is able to execute the jquery stop() function, but when the target is set to 'window' the stop function doesn't work.

I've tried creating a jQuery wrapper for the window object and referencing that as the target like so:

$(document).ready(function() {
  $('#main_nav').localScroll({
    target: $('window'),
    duration:2000,
    stop:true
  });
});

... but this doesn't work either. In the plugin itself, the default values are:

$localScroll.defaults = {
  duration:1000, // How long to animate.
  axis:'y', // Which of top and left should be modified.
  event:'click', // On which event to react.
  stop:true, // Avoid queuing animations 
  target: window, // What to scroll (selector or element). The whole window by default.
  reset: true // Used by $.localScroll.hash. If true, elements' scroll is resetted before actual scrolling
};

Does anyone have any ideas on how to stop the animation from cueueing?

I'm using: jQuery 1.6.1, scrollTo 1.4.2, localScroll 1.2.7

I've try

  $('.menu, .up, #send, #ok').localScroll({
    duration: 1800,
    stop: true,
    hash: true,
    onBefore: function(e, elem, $target) { // this = settings
      $target.stop();
    }
  });

but this dons't work either

.. then I've thougth this can be jQuery version problem (scrollTo and rest are from 2009) so I've move back to jquery 1.2.6 and still nothing so I'm thingking this can be a scrollTo plugin problem

now i will try to write own scrollTo plugin using only .animate()

I FOUND IT!

I don't know why byt object window can't be animated! In console:

$(window).animate({ scrollTop: 110}, 1000);
TypeError
$('body').animate({ scrollTop: 110}, 1000);
[
<body>…</body>

To solve the problem just simply change target to body

target: $('body')

and this is it :)

localscroll jQuery plugin - animation queueing problem

精彩评论

关注公众号

热门标签

图文推荐

localscroll jQuery plugin - animation queueing problem

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：