I have a javascript function that I use to animate the filling out of a form. Basically like a tutorial to show customers what and how to enter their information. I was wondering if anyone had any ideas on what I could use to pause my animations. For example a have a button that when clicked would pause the animation and when clicked again would continue the animation.
My animation is basically several setTimeout's inside of each other.
Example
setTimeout(function(){
$('#box1').val("1");
setTimeout(function(){
$('#box2').val("2");
setTimeout()....... and so on
},2000);
},200);
any ideas would be greatly appreciated thanks.
i m not sure but maybe you can use
$("#box1").stop(true).hide('fast');
OR
setTimeout(function(){ $("#box1").hide(); }, 3000);
use this:
myVar=setInterval(yourfunc(),2000);
for pause use:
cleartInterval(myVar);
you can check my func here: http://jsfiddle.net/YSfpm/
Related
I'm trying to call for a jQuery function when my Flash Canvas animation ends. I can't seem to figure out what code I need to add on that last keyframe in order to do that. I found something like this but it's not working:
this.stop();
ExternalInterface.call("javascript:start_website();");
Thanks in advance!
I managed to find a solution from browsing a few other websites. Basically at the end of my animation on the very last keyframe I added this bit of code:
this.animation_tracker = function() {
start_website();
return false; // prevent the function from being run over and over again
}
exportRoot.animation_tracker();
And within my website I created a jQuery function called start_website(); where I placed all the actions that I wanted to have happen once my animation was over.
in flash canvas you are already programming in javascript (and other js libraries flash uses), so you can't use and don't need the ExternalInterface.call and such.
You can and should call straight to the javascript function:
this.stop();
start_website();
Good luck!
I know there is a bunch of questions like this but none really answering my question.
I had make a preloader with css animation and I want to be synchronised with page load. I can trigger the animation on page load but I want to manage the time that animation last somehow so to follow exactly the page load (even if it's too fast).
An example : http://jsfiddle.net/RgPU7/
I want the 'filling' effect to follow page load time.
Right now I just apply a delay and a fadeout effect to the modal that wraps the css animation.
jQuery(window).load(function(){
$(".modal").delay(3000).fadeOut(1000);
});
Any suggestions would be great. Thanks!
You can always delay a function like this
setTimeout(function() { your_func(); }, 5000);
or you can do something like this
$(this).fadeOut(500, function(){
//Do something
$(this).fadeIn(700);
});
I hope this helps.
I made an animation, and i want to add a callback function at the end of the animation loop.
Do you know how I can do that ?
Thx.
Glad to read you found your solution :)
You can find a complete example on the cgscenegraph website:
http://gwennaelbuchet.github.com/cgSceneGraph/examples/03_Animation/animation_01_SRT/index.html
There are other examples related to animation also: http://gwennaelbuchet.github.com/cgSceneGraph/examples.html
What you have to understand with the animation engine is that a timeline is generated for each couple node+property you want to animate. And it is this timeline that provides events related to the animation.
Here is an example to get the onAnimationEnd of a timeline:
this.sceneGraph.getTimeline(myNode, "rotation.angle").onAnimationEnd = function (event) {
console.log("animation ended");
};
To get onAnimationStart or onAnimate events, it's exactly the same :)
Hope this can help.
okay i found what i want,
there is a property named "onAnimationEnd" into the CGSGTimeline class that is fired at the end of the animation, so i've got my callback function ;)
for information, there are other callback functions like "onAnimate" & "onAnimationStart" in the cgSceneGraph framework.
link to http://gwennaelbuchet.github.com/cgSceneGraph/api.html
best regards.
How can I possibly delay the disappearance of the menu by some miliseconds/seconds?
going ahead and editing this fadesettings: {overduration: 350, outduration: 2000}in the js only changes the animation speed. But THAT IS NOT what I want =).
Please check this JSFiddle to see the JS, CSS, and HTML.
Thanks for the help guys
P.S:- about the top:80px gap that you see, I intentionally put it there cuz that's the way I'm styling my site so I want the gap there.
You can user the setTimeout function to add a delay before you call a function.
In your case, if you want to delay the fadeout of the menu, instead of just doing :
$this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration);
You could do
setTimeout(function() { $this.children("ul:eq(0)").fadeOut(jquerycssmenu.fadesettings.outduration)
}, 2000);
to delay the call by 2 seconds.
Note that I cached the $(this) selector in your fiddle to still be able to access the variable.
http://jsfiddle.net/KB5Ve/
EDIT :
Added comments on the fiddle : http://jsfiddle.net/DBvq7/
anybody knows an easy way to display an alert after each 50 seconds in jquery (infinite loop)
Use setInterval(), like this:
setInterval(function() {
alert('hi!');
}, 50000);
Note this is just JavaScript, no jQuery library needed.
I assume you have a purpose, not actually alerting? :) Please let that be the case!