JQuery отказов анимировать функцию для работы с документом загрузки - PullRequest
Новая
       16

JQuery отказов анимировать функцию для работы с документом загрузки

0 голосов
/ 28 января 2012

У меня есть изображение в 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>

Спасибо за проверку.Очень признателен!:)

Ответы [ 3 ]

1 голос
/ 28 января 2012 
$(document).ready(function () {
    $("#logo").effect("bounce", { times:4, distance:200 }, 400);
});

или, используя более современный стиль функции готовности документа: 

$(function () {
    $("#logo").effect("bounce", { times:4, distance:200 }, 400);
});
0 голосов
/ 28 января 2012

Эта работа для вас: 

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

С jsFiddle пример

0 голосов
/ 28 января 2012

Просто вызвать событие 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);
});
...