Ok simple question for scrollTo. I'm looking for a way to prevent the queuing of the scroll animations. I've tried to work in stop() but it doesn't seem to do the trick.. any Ideas? here's the code...
('#nav_hold li a').click(function(){
$currLoc = $(this).attr('href');
$newLoc = $currLoc.replace('#!','');
$newLoc = "#"+$newLoc;
$(window).scrollTo($newLoc, 1000);
});
here's the site FYI http://www.dudnyk.com/files/connector/
I've had the same problem, but I found the solution here http://usejquery.com/sites/contrast-rebellion
Just use the line
jQuery.scrollTo.window().queue([]).stop(); before any new scrollTo.
There is function clearQueue(). I think that should help.
.stop() Is for removing the currently running animation, to also clear to queue use .stop(true)
$('#about').click(function() {
$(this).stop(true);
$.scrollTo('#about', 1000);
});
From jQuery Docs (linked above):
If more than one animation method is called on the same element, the
later animations are placed in the effects queue for the element.
These animations will not begin until the first one completes. When
.stop() is called, the next animation in the queue begins immediately.
If the clearQueue parameter is provided with a value of true, then the
rest of the animations in the queue are removed and never run.
{ queue : false }
as the scrollTo option
but that's the default. doesn't the anchor click get you somewhere?
When you use $.scrollTo on any element it is actually scrolling(with animation) the document until the scroll reaches to the specified element. So I believe we should stop the animation on document. Try this
$('#about').click(function() {
$(window).stop();
$.scrollTo('#about', 1000);
});
Related
I have the tinycarousel and I put an overlay over it. I want to show text in this overlay every time, the move-function is over. When it switches automatically, the overlay is showhn correct everytime
But when I switch between the pager numbers at the bottom of the slide too fast, sometimes the overlay is too late faded in.
-----> Here is my fiddle to the code below (http://jsfiddle.net/5xMNx/) <-----
$('#slider-code').tinycarousel({
pager: true,
interval: true,
duration: 1500,
intervaltime: 10000,
callback: function(element, index){
$( ".textbox" ).each(function( index ) {
$( this ).hide();
});
var value = $('ul li').eq(index).attr('tag');
console.log(value);
$('#'+value).fadeIn("slow").delay(7500);
$('#'+value).fadeOut("slow");
}
});
});
Has anyone an idea how I can make it right? THANK YOU VERY MUCH!!!
I updated your code, I'm not sure of what you really wanted so ask me if something goes wrong.
Here is the demo : DEMO
What I've changed :
I used a javascript setTimeout method instead of .delay(). This will allow you to reset the timeout with the clearTimeout method : JavaScript Timing Events
Like that :
timeout = setTimeout(function(){ //init the timer
$('#'+value).fadeOut("slow");
},7500);
And you can reset it when you need with :
clearTimeout(timeout); //reset the timer
See JQuery's .delay() doc :
The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
I've also used the JQuery .stop method (doc here) the stop the currently running animation before launching a new one, which may be still running if you click very fast on different slider pages.
I used it like that :
$('#'+value).stop().fadeIn("slow");
Hope I helped you !
I think the issue is relative with queue in Jquery.
We can use clearQueue() to clear queue to stop any animate, however the clear queue cannot stop the call back function
consider this
$("#sth").animate( { width:'100%' }, 2000, function() {
$("#sth").css("width","0%");
});
and
$("#sth").clearQueue().css("width","0%");
is able to stop the animate and push back the width. However, after 2000 miliseconds, it will also turn to 100% width, because of the complete call back function. the function will invoke after 2000 miliseconds no matter whether the queue exists.
From jQuery documentation:
.clearQueue()
Remove from the queue all items that have not yet been run.
and
.stop()
Stop the currently-running animation on the matched elements.
Try use .stop() instead .clearQueue().
calling stop function will stop the animation that was attached on sth obj
function stopSthAnim(){
$('#sth#).stop();
}
you can also use complete callback function
$("#sth").animate( { width:'100%' }, {
duration:2000,
complete: function(){
$('#sth#).stop();
}
}, function() {
$("#sth").css("width","0%");
});
How can I hide the #results after 5 secs ? I tried this but it does not work.
$('#results').hide().html(data).fadeIn('slow').delay(5000).hide();
What I had is this one
$('#results').hide().html(data).fadeIn('slow');
Put a duration on your hide() call and it will work like this:
$('#results').hide().html(data).fadeIn('slow').delay(5000).hide(1);
The issue is that hide() without any parameters is just an immediate operation. It doesn't go through the fx queue so therefore, it doesn't come after the .delay(5000). But, if you give a duration to the function like .hide(1), then it becomes an animation and it goes through the fx queue and thus will come after the .delay(5000).
You can see it work here: http://jsfiddle.net/jfriend00/wzbtU/
From the jQuery doc for hide():
When a duration is provided, .hide() becomes an animation method.
Do you mean something like:
$('#results').hide().html(data).fadeIn('slow');
setTimeout(function() {
$('#results').hide();
}, 5000);
You'd have to use setTimeout.
setTimeout("$('#results').hide().html(data).fadeIn('slow');", 5000);
The reason why .delay(5000) doesn't work is because .hide() isn't included in the animation queue.
The jQuery's fadeOut method is nifty:
$('#results').delay(3000).fadeOut('slow');
I need to stop the animation and instantly complete all pending animations.
stop doesn't work:
Lets say I have animation that moves element that is on 0px by 100px and I use stop when it moved only 50px. The result will be an element at 50px. The result I want is when I interrupt the animation, even if the element is at 50px it will instantly jump to 100px.
How do I do that?
$.fn.stop() has the option to clear the queue and to jump to the end.
Just do something like: $('#foo').stop(true, true);
found this at http://forum.jquery.com/topic/stop-true-true-animation-chains-and-callbacks
(function($){
$.fn.extend({
hardStop: function(){
return this.each(function(){
var e = $(this);
while (e.queue().length){
e.stop(false, true);
}
});
}
});
})(jQuery);
use it by
$("#element").hardStop();
If that doesn't work, maybe change your original code to:
$("#abc").stop().animate(...
Specify manually the last state, don't be lazy. Im sure you can do it :)
$('#foo').stop(true, true);
$('#foo').css({x, '100px'});
I have the following jQuery code
$("#dropdown").hover(function() {
$(this).stop(true,true).fadeTo('fast',1);
$("#options").stop(true,true).slideDown();
}, function() {
$(this).delay(1000).stop(true,true).fadeTo('fast',0.1);
$("#options").delay(1000).stop(true,true).slideUp();
}
);
What I expect to happen is when the mouse leaves #dropdown it will wait 1 second before continuing. This is not happening.
What I am trying to achieve, in case there is a better way, is to leave the drop down menu visible for a second or two after moving your mouse and I would also like to prevent the events from happening again to prevent artifacts and "funnies" if you were to move the mouse over and out from the div very quickly
The problem is .stop(). If you take that out it works:
http://jsfiddle.net/LZ8yt/
Your calls to stop aren't placed on the animation queue - they run immediately. I'm not sure whether you really need them in the "hover out" routine.
edit removed dumbness
You can always go lo-tech with setTimeout.
var dropDownElement = $(this);
setTimeout(function()
{
dropDownElement.fadeTo('fast', 0.1);
// Other Code
}, 1000);