1

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.

3

5 Answers 5

3
<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>​​​
0
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>
2
  • Thanks, where exactly would I add that line? Aug 23, 2012 at 0:01
  • I would edit your code like this pastebin.com/VEirp2ms If you want, you could use @invertedSpear solution, by just using $("#logo").shake(); instead of click() :) Aug 23, 2012 at 0:03
0

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>
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.

1
  • Not sure what you mean, would I swap that in place of something in the code? Aug 23, 2012 at 0:00
0

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

Check out the documentation for the trigger method.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.