Jquery反弹动画函数来处理文档加载

Jquery bounce animate function to work on document load

本文关键字：处理 文档 加载 函数 动画 Jquery      更新时间：2023-09-26

我在html文档中有一个图像，当网页加载时，我希望图像反弹。我有一个jquery函数，它只在点击图像时才执行此操作。我不知道如何在Load。。。

这是代码

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin-left: 500px; margin-top: 200px; width: 100px; height: 80px; position: relative; }
</style>
  <script>
  $(document).ready(function() {
$("#logo").click(function () {
      $(this).effect("bounce", { times:4, distance:200 }, 400);
});
  });
  </script>
</head>
<body> 
 <div id="logo"><img src="http://visionhelp.files.wordpress.com/2012/01/soccer-ball.jpg"/> </div>
</body>
</html>

谢谢你查看这个。非常感谢！：）

$(document).ready(function () {
    $("#logo").effect("bounce", { times:4, distance:200 }, 400);
});

或者，使用更现代风格的文档准备功能：

$(function () {
    $("#logo").effect("bounce", { times:4, distance:200 }, 400);
});

这适用于您：

$(window).load(function() {
    $('#logo').effect("bounce", {
        times: 4,
        distance: 200
    }, 400).click(function() {
        $(this).effect("bounce", {
            times: 4,
            distance: 200
        }, 400);
    });
})

使用jsFiddle示例

只需在页面加载时触发click事件。试试这个

$(document).ready(function() {
  $("#logo").click(function () {
      $(this).effect("bounce", { times:4, distance:200 }, 400);
  })
  .click();//Will trigger the click event on page load
});

如果你不想在徽标点击上有这种效果，而只是在页面加载上，那么就使用这个。

$(document).ready(function() {
    $(this).effect("bounce", { times:4, distance:200 }, 400);
});
相关文章：