我如何模擬jQuery搖動動畫？

Question

我正在嘗試做一些沒有Flash的動畫，我需要一個標志加載然后搖動才能完全停止

我需要它在加載時發生（搖動是客戶端請求）。

現在，當你點擊它時，這是有效的，但我需要它自動運行。

這是我的JavaScript代碼：

$(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();
  });
});

#logo元素是包含圖像的div。

非常感謝任何幫助，謝謝。

Answer 1

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

Answer 2

如果您需要模擬點擊，可以將其添加到您的代碼中：

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

無論如何，我建議你使用$（document）.ready而不是window，因為它允許你在文檔加載后讓腳本執行。

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

Answer 3

不是$("#logo").shake()在加載函數結束時工作嗎？

而不是使用：

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

采用：

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

您不必添加onclick事件偵聽器並模擬單擊，您可以直接觸發該函數。

Answer 4

你應該實際上叫$('#logo').shake(); 但你也可以做$('#logo').trigger('click');

查看觸發器方法的文檔。

Answer 5

如果你想在不點擊div的情況下這樣做，為什么你有這個點擊處理程序。 您可以在頁面加載時執行此操作：

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