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

如果您需要模拟点击，可以将其添加到您的代码中：

$("#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 2

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

$("#logo").shake()在加载函数结束时不起作用吗？

而不是使用：

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

使用：

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

您不必添加onclick事件侦听器并模拟点击，您可以直接触发该功能。

Answer 4

您实际上应该致电$('#logo').shake();，但您也可以$('#logo').trigger('click');

查看trigger方法的文档。

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>

我如何模拟jQuery摇动动画？

5 个答案: