javascript - How do I simulate a jQuery shake animation? - Stack Overflow

admin管理员组

文章数量:1416072

I'm trying to do some animation without Flash, I need a logo to load then shake before ing to a plete 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.

I'm trying to do some animation without Flash, I need a logo to load then shake before ing to a plete 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.

• javascript
• jquery

Share Improve this question Follow edited Mar 29, 2019 at 17:33 Malekai 5,05166 gold badges3131 silver badges6464 bronze badges asked Aug 22, 2012 at 23:57 adrian collinsadrian collins 5722 silver badges88 bronze badges 3

• 1 Did you search at all?! stackoverflow./questions/773639/… stackoverflow./questions/1839363/… stackoverflow./questions/1786377/simulate-native-click stackoverflow./questions/4338161/… – ahren Commented Aug 23, 2012 at 0:01
• Yes I did, but couldn't get it to work. Not a programmer, but got my question answered, thanks. – adrian collins Commented Aug 23, 2012 at 0:05
• If your question was answered it's mon courtesy on stack overflow to accept the answer by clicking the checkmark below the up/down vote arrows. – invertedSpear Commented Aug 23, 2012 at 0:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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>​​​

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

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

Anyway, I remend 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>

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>

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.

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

Check out the documentation for the trigger method.

本文标签： javascriptHow do I simulate a jQuery shake animationStack Overflow