How do I simulate a jQuery shake animation?

Question

I'm trying to do some animation without Flash, I need a logo to load then shake before coming to a complete stop

I need it to happen on load (the shaking is a client request).

Right now, this works when you click it, but I need it to run automatically.

Here is my JavaScript code:

$(window).load(function() {
  jQuery.fn.shake = function() {
    this.each(function(i) {
      $(this).css({"position": "absolute"});
      for(var x = 1; x <= 3; x++) {
        $(this).animate({left: 43}, 10)
          .animate({left: 23}, 50)
          .animate({left: 23}, 10)
          .animate({left: 13}, 50)
          .animate({left: 43}, 50)
          .animate({left: 33}, 50)
          .animate({left: 43}, 50);
      }
    });
    return this;
  }

  $("#logo").click(function() {
    $(this).shake();
  });
});

The #logo element is the div that contains the image.

Any help would be greatly appreciated, thanks.

Did you search at all?! http://stackoverflow.com/questions/773639/how-can-i-simulate-an-anchor-click-via-jquery http://stackoverflow.com/questions/1839363/simulating-a-click-in-jquery-javascript-on-a-link http://stackoverflow.com/questions/1786377/simulate-native-click http://stackoverflow.com/questions/4338161/jquery-simulate-a-a-href-link-click — ahren, Aug 23 '12 at 00:01
Yes I did, but couldn't get it to work. Not a programmer, but got my question answered, thanks. — adrian collins, Aug 23 '12 at 00:05
If your question was answered it's common courtesy on stack overflow to accept the answer by clicking the checkmark below the up/down vote arrows. — invertedSpear, Aug 23 '12 at 00:10

score 3 · Accepted Answer · answered Aug 23 '12 at 00:02

<script type='text/javascript'>
    jQuery.fn.shake = function() {
        this.each(function(i) {
            $(this).css({
                "position": "absolute"
            });
            for (var x = 1; x <= 3; x++) {
                $(this).animate({
                    left: 43
                }, 10).animate({
                    left: 23
                }, 50).animate({
                    left: 23
                }, 10).animate({
                    left: 13
                }, 50).animate({
                    left: 43
                }, 50).animate({
                    left: 33
                }, 50).animate({
                    left: 43
                }, 50);
            }
        });
        return this;
    }
    $(document).ready(function() {
        $("#logo").shake();
    });
</script>

score 1 · Answer 2 · edited Aug 23 '12 at 00:04

1

If you need to simulate a click, you can add this to your code:

$("#logo").click();

Anyway, I recommend you to use $(document).ready instead of window, as it will allow you to let the scripts just execute after the document has been loaded.

<script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ jQuery.fn.shake = function() { this.each(function(i) { $(this).css({ "position" : "absolute" }); for (var x = 1; x <= 3; x++) { $(this).animate({ left: 43 }, 10).animate({ left: 23 }, 50).animate({ left:23},10).animate({ left: 13 }, 50).animate({ left: 43 }, 50).animate({ left: 33 },50).animate({ left: 43 }, 50); } }); return this; } $("#logo").click(function() { $(this).shake(); }); });//]]> </script>

edited Aug 23 '12 at 00:04

Breezer

10,410
6
29
50

answered Aug 23 '12 at 00:00

Ivo Pereira

3,410
1
19
24

Thanks, where exactly would I add that line? – adrian collins Aug 23 '12 at 00:01
I would edit your code like this http://pastebin.com/VEirp2ms If you want, you could use @invertedSpear solution, by just using $("#logo").shake(); instead of click() :) – Ivo Pereira Aug 23 '12 at 00:03

score 0 · Answer 3 · edited Mar 29 '19 at 17:40

0

Doesn't $("#logo").shake() work at the end of your load function?

Instead of using:

$("#logo").click(function() {
  $(this).shake();
});

Use:

$("#logo").shake();

You don't have to add an onclick event listener and simulate a click, you can just fire that function directly instead.

edited Mar 29 '19 at 17:40

Malekai

4,765
5
25
60

answered Aug 22 '12 at 23:59

invertedSpear

10,864
5
39
77

Not sure what you mean, would I swap that in place of something in the code? – adrian collins Aug 23 '12 at 00:00

score 0 · Answer 4 · edited Mar 29 '19 at 17:49

0

You should actually call $('#logo').shake(); but you can also do $('#logo').trigger('click');

Check out the documentation for the trigger method.

edited Mar 29 '19 at 17:49

Malekai

4,765
5
25
60

answered Aug 23 '12 at 00:00

Pit Digger

9,618
23
78
122

score 0 · Answer 5 · answered Aug 23 '12 at 00:04

If you want to do it without clicking on the div , why are you having that click handler. You can do it when the page loads like this:

<script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){

        jQuery.fn.shake = function() {
            this.each(function(i) {
            $(this).css({ "position" : "absolute" });
            for (var x = 1; x <= 3; x++) {
            $(this).animate({ left: 43 }, 10).animate({ left: 23 }, 50).animate({ left:23},10).animate({ left: 13 }, 50).animate({ left: 43 }, 50).animate({ left: 33 },50).animate({ left: 43 }, 50);
                }
            });
            return this;
            }

        $(this).shake();
});//]]>  

</script>

How do I simulate a jQuery shake animation?

5 Answers5