Below is a working copy. However, it just wiggles constantly. I would like it to wiggle every 10 seconds for 1 minute and then stop. Also I would prefer it to wiggle less and slower. I’ve exhausted google looking for an answer. Here is the plugin home page. http://www.class.pm/files/jquery/jquery.wiggle/demo/ But he doesnt go into much detail on the how tos. Thanks!
If you put this code at the bottom of the example page you posted, it will do what you want.
Hopefully it’s quite self-explanatory, but if you have any questions, let me know.
I can also post a sample page if it helps.
function wiggleForOneSecond(t){
t.wiggle();
setTimeout(function(){t.wiggle('stop')},1000)
}
$(document).ready(function(){
var thingToWiggle = $('.wiggle');
wiggleForOneSecond(thingToWiggle);
s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
setTimeout(function(){window.clearInterval(s)},61000)
});
Awesome that works perfect - than you very much! Anyway to retool that a little so it starts the wiggle 10 seconds after page load and aborts on each page once hovered over? Two reasons… once hovered over they’ve seen it. And two it’s in a sprite which gets bigger on hover. Dont want to mix animations.
The first part is easy. Just remove the first call to wiggleForOneSecond();
As for the second part - it shouldn’t be too difficult. I can have a look at that this evening for you (in about three hours), if you would like (I’m busy right now).
Cool - cool. So the first part should just look like this to make it start in 10 seconds…
function {
t.wiggle();
setTimeout(function(){t.wiggle(‘stop’)},1000)
}
Or remove that whole block so it begins at (document).ready? And yes please. If you could take a look at that tonight that would be very helpful. Thanks for help thus far!
function wiggleForOneSecond(t){
t.wiggle();
setTimeout(function(){t.wiggle('stop')},1000)
}
$(document).ready(function(){
var thingToWiggle = $('.wiggle');
s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
setTimeout(function(){window.clearInterval(s)},61000)
});
No worries if your busy. That last snippet runs it for 10 seconds or so on page load - then waits 10 seconds - then runs for 1 second ever 10 seconds. As you know I’m looking for it to not run for 10 seconds after page load - then run for 1 second every 10 seconds for 1 minute - or maybe 30 seconds. So it runs three intervals. Dont want to pester the user.
Here is the updated code.
The wiggle should only kick in after 10 seconds and if you hover over the picture, the effect will be cancelled altogether.
function wiggleForOneSecond(t){
t.wiggle();
setTimeout(function(){t.wiggle('stop')},1000)
}
$(document).ready(function(){
var thingToWiggle = $('.wiggle');
var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
setTimeout(function(){window.clearInterval(s)},61000)
thingToWiggle.hover(function(){
window.clearInterval(s)
});
});
Would be nice if you could let me know if this works for you.
Ok I just tested it on my iPad using Textastic app. And unfortunately it does the same as the last. On page load it wiggles for 10 secs - stops for 10 - then wiggles for 1 and stops for 10. Any thoughts? Thanks!
Hi again,
Just seen the problem (I probably should’ve checked out your code first).
You have two $(document).ready(function(){}) blocks.
Use the code that I just posted and I’m pretty confident it’ll work as expected.
One last question? Trying to understand that math. If I wanted to say only run it for 30 seconds. In other words I wanted only three wiggles per page load each ten seconds apart. Would it be 31000 milliseconds? Basically are the run times (1000 milliseconds) and wait times (10000) part of that 31000? In which case it would be 33000 + the 10 second initial wait so 43000 or no? Thanks.
Thanks Ralph, that’s an interesting link. It’s amazing what can be done with CSS these days.
The way the code works is to use the setInterval() method to repeat the wiggle every ten seconds.
As you are probably aware, setInterval() calls a function or evaluates an expression at specified intervals (in milliseconds) and it will continue calling the function until clearInterval() is called, or the window is closed.
Therefore if you want three wiggles, one will take place after ten seconds, the second one after twenty seconds and the third one after thirty seconds, so you need to call clearInterval() any time after the third wiggle has taken place, but before the fourth wiggle. In my example I called it one second later, but you could also call it two, three, four etc … seconds later with the same effect.
The amended code would look like this:
function wiggleForOneSecond(t){
t.wiggle();
setTimeout(function(){t.wiggle('stop')},1000)
}
$(document).ready(function(){
var thingToWiggle = $('.wiggle');
var s = setInterval(function(){wiggleForOneSecond(thingToWiggle)},10000);
setTimeout(function(){window.clearInterval(s)},31000)
thingToWiggle.hover(function(){
window.clearInterval(s)
});
});
