如何模拟jQuery抖动动画

How do I simulate a jQuery shake animation?

本文关键字：jQuery 抖动 动画 模拟 何模拟      更新时间：2023-09-26

我正在尝试在没有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。

如有任何帮助，我们将不胜感激，谢谢。

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

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

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

如果你想在不点击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>

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

代替使用：

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

用途：

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

您不必添加onclick事件侦听器并模拟单击，只需直接启动该函数即可。

您实际上应该调用$('#logo').shake();，但也可以执行$('#logo').trigger('click');

查看触发器方法的文档。

相关文章：