Music Equalizer Effect

[justdan]

Hey guys. I’m working on some little loaders that resemble an equalizers. I’m basically sliding a grey div over another div with a gradient background to make it look like it’s loading from red to green. I can get it to slide left easy enough, but I’m curious as to how I could make it so that it will slide left a little, then slide right some, and keep at that. I put together a little something to demo out what I’d like. My demo though I think isn’t the best for two reasons – It uses animate to move but I feel that I’m abusing it. Also I’d like to make it so it will fire the function and then repeat the function once it’s done.

Here’s the quick fiddle:
http://jsfiddle.net/RHCqQ/41/

The div that slides would be the grey div in my case. I feel like this is super easy and I’m just having a derp moment here. I just need some help hacking up a way to maybe call that function recursively or if there could be a much more efficient way to do this without using animate too often that’d be great too. Any help is always appreciated. Thanks guys.

[Shikkediel]

How about this?

http://jsfiddle.net/RHCqQ/43/

The animate method is synchronous so there’s no need to use the callback functions. Only with the last animation – to loop to the start again. Looking at it, I think you wanna make sure the random subtraction doesn’t make the element ‘disappear’. But that’s another subject. It would probably not be too difficult to do with CSS either (but I am admittedly more into this stuff). I could also imagine some other tweaks, like using an array for the values so not all the parameters have to be passed through the move function.

http://jsfiddle.net/RHCqQ/44/

Post was obviously edited…

[justdan]

@Shikkediel That’s perfect! Plus it’s much nicer to look at and easier on the eyes. Thanks for the bits of info!

[Shikkediel]

No problem, @justdan. Here’s an even niftier version where you can specify a whole sequence of left positions (in this case they are set directly and are not added upon the previous position – so make sure the last one is zero) and the function will then automatically loop through all. With a random timing in between 300 and 700 ms per step :

http://jsfiddle.net/RHCqQ/46/

:-)

[justdan]

@Shikkediel I never even thought about going over an array like that. That’s pretty sweet, plus only calling animate once. I think that will win. Thanks again for your help. This will come in handy.

[Shikkediel]

You’re welcome. I happened to make something similar not too lomg ago when I attempted to recreate a Flash template with jQuery (definitely the better of the two). This bit of code is a bit nicer than what I came up with before though. Anyway, the last value doesn’t have to be zero of course – as long as it’s ‘in harmony’ with the first one.

Beware, there’s some unsolicited audio there (and also voluntary sound if you click the diagram) but it was merely experimental :

http://ataredo.com/templates/vehicle/

Built in a bmp parameter…

Cheers.

[Author]

Posts