Question

我在html文档中有一个图像，当网页加载时我希望图像反弹。我有一个jquery函数，只有在单击图像时才会执行此操作。我无法弄清楚如何将这项工作放在载荷上......

这是代码

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

感谢您查看此信息。非常感激！：）

Answer 1

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

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

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

Answer 2

只需在页面加载时触发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);
});

Answer 3

这项工作适合你：

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

使用 jsFiddle 示例

Jquery弹跳动画功能以处理文档加载

3 个答案: