I'm wring a custom jQuery plugin based on the awesome jGrowl plugin. I just need it to do a few more things than it already does.
Basically everything is working as I need it to (only tested in Firefox so far) except that if you call the plugin too many times too fast it stops and breaks everything
http://jsbin.com/ofejo/edit
Any ideas about what might cause this?
sounds like you need to implement a callback feature and put the additional calls into callbacks to ensure that the plugin processes before other executions occur.
It's rendering and trying to calculate where to place the block but failing because there's an animation already taking place. (often an animation changes the type of display style being used in order to create the effect and this causes oddities with calculations such as these)
You need to queue the effect, but I'm not precisely sure how you would go about it because you're creating new elements, and there's more source code than I am willing to look through at the moment. Let me know if this helps.
http://docs.jquery.com/Effects/queue
Related
Having discovered requestAnimationFrame just a moment ago, I have dived into all the information I could find about it. To name just a few of the resources I came across in case there are others looking for more info about it:
http://creativejs.com/resources/requestanimationframe/ - explains the basics about it.
http://www.html5rocks.com/en/tutorials/speed/animations/ - explains how to use it.
Anyway, all of these resources tell me something about how requestAnimationFrame works or how it could/should be used, but none of them tell me when it is right to use it.
Should I use it for animations (repeated changes to the style of an element, much like CSS animations)?
Should I use it when an automated event wants to change the css/classes of one or multiple elements?
Should I use it when an automated event wants to change the text value of one or multiple elements? (e.g. updating the value of a clock once every second)
Should I use it when an automated event wants to modify the DOM?
Should I use it when an automated event needs values like .offsetTop, .offsetLeft and then wants to change styles such as top and left a few lines further?
Should I use it when a user generated event causes any of the above changes?
TL;DR: When is it right to use requestAnimationFrame?
You shouldn't yet. Not really, at least. This is still experimental and may or may not reach full recommendation (it is still a working draft at this point). That said, if you don't care about older browsers, or willing to work with the polyfill available the best time to use it is when you are looking to draw things to the screen that will require the browser to repaint (most animations).
For many simple modifications of the DOM, this method is overkill. This only becomes useful when you are doing animations when you will be drawing or moving items quickly and need to make sure that the browser repainting is keeping up enough to make it smooth. It will allow you to ensure that every frame you calculate will be drawn to the screen. It also provides a utility for more accurate time measurements to your animations. The first argument is the time at which the paint will occur, so you can ensure that you are where you should be at that moment.
You should not use it when you are doing many simple modifications to the DOM, or things that don't need to be smoothly transitioned. This will be more expensive on your users' computers so you want to limit this to making things smoother in transitions, movements and animations. Forcing a frame redraw is not needed every time you make a change on the page, since the response will be fast enough most of the time you don't need to worry about that extra couple milliseconds between draws.
As the previous answer says, you should not use it in the discontinuous animation because that don't need to be smoothly transitioned. In most cases, it's used for properties which vary continuously with time.
Does setTimeout work from WITHIN setInterval?
I'm writing some JavaScript to animate some DOM elements for a strange artistic project.
The best way for me to explain my question is to give an example:
I have 50 different divs that I need to animate by changing their position on screen, using setInterval. I need each div to be moving at a different rate.
The solution I planned to use was to have a sleep function within my larger changePosition function, so that I could pass a different sleep value for each div. This way, I could assign a unique rate of movement for each div via a dictionary.
The issue that I'm having is that JavaScript does not have "sleep". It only has setTimeout, which does not seem to be working from within my setInterval loop.
setTimeout() works perfectly inside of setInterval(), but since you're trying to emulate sleep() which javascript does not do or have, it sounds to me like you are trying to write synchronous code when setTimeout() works asynchronously. You will need to rethink how you write your code to do this.
Post some of your code and we can help a lot more specifically.
I'm not entirely sure I follow what you're trying to do, but it's probably easiest to animate N different things each at a different rate by just using a separate timer for each object. Each object's timer can then be set at it's own rate and detect it's own completion and you don't have to manage them all from some central timer.
In addition, if you're writing animation routines from scratch in javascript, you're doing a lot more work than you need to. This problem has been solved thousands of times already and there's no reason you have to invent it yourself all over again. A simple Google search for "javascript animation examples" will show all sorts of samples and plenty of code you can base yours off of. Here's a good tutorial: http://javascript.info/tutorial/animation.
The popular libraries like jQuery have all sorts of built-in functions for animation that do a lot of the dirty work for you also. Animation can also be done using CSS3 in modern browsers (other than IE).
Maybe you are looking for jQuery delay() function?
http://api.jquery.com/delay/
And here: Can I use .delay() together with .animate() in jQuery? you can see how delay() and animate() functions works together.
JQuery is written in Javascript. As someone who knows a little of each, I have to wonder how they wrote some of it. How do you animate HTML elements in pure Javascript? Is it just repeatedly updating the CSS property that is to be animated, using standard DOM manipulation, with callbacks to make it asynchronous? Or is it something more sophisticated?
jQuery animations are just updating CSS properties on a recurring timer (which makes it asynchronous).
They also implement a tweening algorithm which keeps track of whether the animation is ahead of schedule or behind schedule and they adjust the step size in the animation at each step to catch up or slow down as needed. This allows the animation to finish in the time specified regardless of how fast the host computer is. The downside is that slow or busy computers will show more choppy animations.
They also support easing functions which control the time/shape of the acceleration of the animation. Linear means a constant speed. Swing is a more typical, start slow, accelerate to max speed in the middle and then end slowly.
Because animations are asynchronous, jQuery also implements an animation queue so that you can specify multiple animations that you want to see execute one after the other. The 2nd animation starts when the first animation finishes and so on. jQuery also offers a completion function so if you want some of your own code to run when an animation is complete, you can specify a callback function that will get called when the animation completes. This allows you to carry out some operation when the animation is complete such as start the animation of some other object, hide an object, etc...
FYI, the jQuery javascript source code is fully available if you want more details. The core of the work is in a local function called doAnimation(), though much of the work is done in functions called step and update which can be found with the definition of jQuery.fx.prototype.
That's it : a plain old setInterval and some DOM manipulation.
Of course, the code is a bit more complex than that.
Look : http://code.jquery.com/jquery-latest.js , near the end of the file. Search for jQuery.fx.prototype .
When inspecting element during a jQuery animation almost always it changes your CSS code, which is assigned to the element through jQuery that is not really assigned from HTML you write. Get a FireBug if you don't have it for firefox and inspect what's going on while the animations execute.
Without having read the code myself, from what I understand it is indeed using standard Javascript methods and properties to update the DOM elements and CSS styles at regular intervals ("ticks"), which it accomplishes using standard setInterval() and setTimeout() methods.
ive seen the plugins etc to create a carousel of images etc, but what i want to achieve is having a content slider.
The content would be approx 500x400px, i was hoping to just give the content a div with unique id, and have it show for, say 6 seconds but if your mouse enters then for animation to hold.
I was thinkin along the lines of using:
$(#id).fadeOut(*time*);
Im on my mobile so its not the best example of code. Id be using set Interval for timeouts, however, do you think i should opt for a plugin? I already use many on my site, so would prefer just this page to use some simple jQuery.
This can be done in jQuery without too much work. You already know about setInterval() and the jQuery animation functions. All you'll need to do is implement mouseenter() and mouseleave() to properly pause and continue the animations. Perhaps a setInterval() every time mouseleave() and a clearInterval() every time mouseenter().
I agree with marcosfromero that plug-ins are great so you don't have to develop the whole thing again, but you stated that you have a lot of plug-ins already, so it could be better to write it yourself so that you gain more experience and have more control over it. I would say the choice to go with a plug-in depends on whether you find one that fits your needs and the size of it (even with minify, size does matter and one must consider blocking while JS files load).
If a plugin works for you, I don't see the point in developing the whole thing again.
Recall that most plugins offer a minified version so size wouldn't be a matter.
You can also use some automatic tool to minify code and join several JavaScript source files to prevent lots of requests.
If you still think the plugin is too big for your needs, consider inspiring yourself with the plugin's source code.
I am experimenting with jQuery and the animate() functionality. I don't believe the work is a final piece however I have problem that I can't seem to figure out on my own or by trolling search engines.
I've created some random animate block with a color array etc and everything is working as intended including the creation and deletion of the blocks (div's). My issue is within 2mins of running the page, Firefox 4 is already at more than a 500,000k according to my task manager. IE9 & Chrome have very little noticeable impact yet the processes still continue to increase.
Feel free to check out the link here: http://truimage.biz/wip300/project%202/
My best guess are the div's are being created at a greater speed than the 2000ms they are being removed however I was hoping an expert might either have a solution or could explain what I am doing wrong and some suggestions.
On another note, from the start of my typing this out till now the process is at 2,500,000k. Insane!m
It could be a lot of things other than just your script there. It could be a mem leak in one of the jQuery things you use, pretty hard to say.
Something you could try is this though:
Instead of creating new squares, use a "square pool". Let's say you create 20 squares and just keep re-using them instead of creating new ones.
You'd basically just have an array for the pool and take elements out from it when they are displayed, and put them back to it when the animation finishes.