Is there anyway to make a div box shake on page load? Like maybe just once or twice?
Update: At this URL I have it still not working on page load, what am I doing wrong?
I think I'm stuck at the onpage load; that failure can be seen here: Get onpage to work correctly
I've also tried initiating the animation with my already implemented body onLoad:
<body onLoad="document.emvForm.EMAIL_FIELD.focus(); document.ready.entertext.shake();" >
But still failing like a champ.
Is there anyway to make a div box shake on page load? Like maybe just once or twice?
Update: At this URL I have it still not working on page load, what am I doing wrong? http://tinyurl.com/79azbav
I think I'm stuck at the onpage load; that failure can be seen here: Get onpage to work correctly
I've also tried initiating the animation with my already implemented body onLoad:
<body onLoad="document.emvForm.EMAIL_FIELD.focus(); document.ready.entertext.shake();" >
But still failing like a champ.
Share Improve this question edited May 23, 2017 at 12:24 CommunityBot 11 silver badge asked Nov 7, 2011 at 19:59 Lieutenant DanLieutenant Dan 8,27427 gold badges97 silver badges215 bronze badges 2- 6 Click refresh and smack your monitor! :) – Louie Commented Nov 7, 2011 at 20:02
- @Louie thats my fallback for old IE =) – Lieutenant Dan Commented Nov 24, 2013 at 23:20
2 Answers
Reset to default 26Try something like this:
EDIT:
Changed Shake() to shake() for consistency with jQuery conventions.
jQuery.fn.shake = function() {
this.each(function(i) {
$(this).css({ "position": "relative" });
for (var x = 1; x <= 3; x++) {
$(this).animate({ left: -25 }, 10).animate({ left: 0 }, 50).animate({ left: 25 }, 10).animate({ left: 0 }, 50);
}
});
return this;
}
EDIT:
In my example the left position is set to 25, but you can reduce this for a more subtle effect or increase it for a more pronounced effect.
Using the shake function:
$("#div").shake();
Here's a jsFiddle that demonstrates it: http://jsfiddle.net/JppPG/3/
Slight variation on @James-Johnson's excellent answer for ~shaking~ elements that are absolute positioned. This function grabs the current left position of the element and shakes it relative to this point. I've gone for a less violent shake, gas mark 10.
jQuery.fn.shake = function () {
this.each(function (i) {
var currentLeft = parseInt($(this).css("left"));
for (var x = 1; x <= 8; x++) {
$(this).animate({ left: (currentLeft - 10) }, 10).animate({ left: currentLeft }, 50).animate({ left: (currentLeft + 10) }, 10).animate({ left: currentLeft }, 50);
}
});
return this;
}