I would like to stop my jquery animation when I open new tab in browser. Every time when I leave my page for a while and I come back after some time, my jquery slider goes crazy and it change slides like insane, because I didn't stop it. Do you have some solution?
In JavaScript:
window.addEventListener('focus', function() {
// code to start
});
window.addEventListener('blur', function() {
// code to stop
});
With jQUery:
$(window).bind('focus', function() {
// code to start
});
$(window).bind('blur', function() {
// code to stop
});
I read somewhere about this and it's called animation queue buildup. Instead of trying to stop animation when opening new tab, put stop() just before starting an animation.
This will ensure that previous animation is killed before continuing....
for example:
$('.some-selector').stop().slideUp();
Hope this helps...
Related
I am using Hammer this way, it works (it just triggers next/prev buttons):
var slider = document.getElementsByClassName('slider');
Hammer(slider[0]).on("swiperight", function() {
prev.click();
});
A according to Stack thread, on event when modal is coming out (hammer is still swiping behind it :/) I am trying to turn it of with:
Hammer(slider[0]).off("swipeleft");
Hammer(slider[0]).off("swiperight");
But it doesn't work. It's still swipeing behind modal. Any idea why?
Save the Hammer instance to a variable. The following example removes pan event after 5 seconds.
var h = new Hammer(document);
h.on('pan', function(){
console.log('Panned');
});
setTimeout(function(){
console.log('removed');
h.off('pan');
}, 5000);
<script src="http://hammerjs.github.io/dist/hammer.min.js"></script>
I searched for similar problems but none of the solutions didn't help me.
So, here is my problem, i have in my header a few link for other pages (about, porftiolio etc...) and i have one animation in javascript when <a> element is clicked. But my page transition is instantly so that animation can't be seen. So what should i do to maybe stop page transition for a few second till my animation's end. Here is an example: http://codepen.io/anon/pen/zrXrXM . Can somebody help me what should i do to stop transition until my animation ends.
preventDefault to stop the re-direct, then change the window.location on the animation complete.
$("a").click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
$(".header").slideUp("slow", function(){
window.location = href;
});
});
Updated CodePen
You can use the setTimeout() function
look here: http://codepen.io/SitePoint/pen/Ejxvjr
Explain here:http://www.sitepoint.com/jquery-settimeout-function-examples/
I've been working on this slider for a bit, and I've got it to auto play with some nice simple Jquery markup. I decided I wanted to have the option to go to previous and next on the slider, but I'm not sure if it's possible with the set up I have. I've got a "Next" Button set up that moves to the next image. My problem lies in getting the timer to restart after you hit next in the code. Is this possible to do, am I just overlooking something? I also am wondering how to I create the equivalent of the "next" button for a "previous" button. Any help would be appreciated, since I've been banging my head against this one for while.
Here is the Jquery I'm using:
var time = 6000;
function play() {
setInterval(function(){
var next = $(".slideshow .active").removeClass("active").next(".image");
if (!next.length) {
next = $(".slideshow .image:first");
}
next.addClass("active");
}, time);
}
play();
/*Start of function for next button */
function forward() {
$('.forward').click(function() {
var go = $(".slideshow .active").removeClass("active").next(".image").addClass("active");
if (!go.length) {
go = $(".slideshow .image:first");
}
go.addClass("active");
});
}
forward();
I've created a CodePen(http://codepen.io/Develonaut/pen/lLmkc) to try and work this out. I will gladly give credit on the CodePen for whoever helps. Thanks so much!
Check out clearInterval.
You need to set the return value of your setInterval to a variable, then pass that variable to clearInterval to reset your timer. Do that on each press of your previous/next buttons, then call the play function again to start the timer from the beginning.
Here's an updated version of your CodePen example.
Do something like this:
Store the interval id - setInterval() returns this for later use with clearInterval()
var intervalId = setInterval(function()...
Then clear & reset the interval when the button is pressed:
clearInterval(intervalId);
play();
So I've got a basic system set up to reload webcam jpgs at a regular interval, but it's weird to see the file load. I'd rather have one fade into the other or at least wait for the whole image to load before it swaps the other one out.
$(document).ready(function() {
setInterval('updateCamera()',1000);
});
function updateCamera() {
$('#camera').attr('src','cam_1.jpg?'+ new Date().getTime());
}
Here is the site, click on "Live Feed" www.graysonearle.com/frogutopia Any ideas?
You can try something like this
$(document).ready(function() {
setTimeout('updateCamera()',1000); // Just call one time on dom ready using setTimeout()
});
function updateCamera() {
$('#camera').attr('src','cam_1.jpg?'+ new Date().getTime()).load(function() {
updateCamera(); // then call updateCamera() each time after image load complete
});
}
What's happening
Okay, so I've made a function on my front page where some products are shown besides each other, fading out, changing products and fading back in every 5 seconds. The code looks like this:
var t;
$(document).ready(function(){
// Some pre-animation stuff, like loading the products etc.
// Initialize animation timer
t = setInterval("changeProducts();", 5000);
};
function changeProducts() {
// Fade out
$("#anfBox").fadeTo(200, 0.01, function() {
// Change products
// Fade back in
$("#anfBox").fadeTo(200, 1);
});
}
It all looks fine and runs as it should, except when i go to another window for a minute and then comes back, the changeProducts function is executed rapidly a few times (depending on how long i've been away). The products fade out, change fades in again, and then repeats instantly, where there should be a ~5 second delay.
What I've tried
So what I think I need to do is use something like clearInterval(t) when the focus is lost from the window, then re-initialize the timer when the window is re-entered, i just don't know how to do that, and i'm having a hard time finding anything useful on google.
I'm thinking maybe there's allso a way to run the animations even if the window is not in focus to avoid the function-queue.
I've also tried using setTimeout() instead but with no luck.
Any ideas on how to avoid the animation-queue is much appreciated.
With the latest browser updates lots of browsers now stop execution of code when current page or tab is not active. When you return that tab/window it executes all of queued actions and you see a rush of effect running each after.
Simply check effect queue before apply another effect, if queue's length is 0 then apply.
Try this (example);
var t;
function changeProducts() {
// Fade out
var $anfBox = $("#anfBox"),
queue = $anfBox.queue('fx');
if (queue && queue.length === 0) {
$anfBox.fadeTo(200, 0.01, function() {
// Change products
// Fade back in
$anfBox.fadeTo(200, 1);
});
}
}
$(document).ready(function() {
// Some pre-animation stuff, like loading the products etc.
// Initialize animation timer
t = setInterval(changeProducts, 5000);
});