При загрузке jquery, div отказов пользовательского интерфейса - PullRequest
Новая
       2

При загрузке jquery, div отказов пользовательского интерфейса

0 голосов
/ 22 марта 2012

Надеюсь, что кто-то может помочь, я, кажется, не могу разобраться с этим, я хотел бы загрузить анимацию jquery onload и позволить ей подпрыгивать неумышленно несколько раз вместо того, чтобы нажимать на нее.

Также этокажется, отскакивает все мои дивы?

Любые идеи, вот что у меня есть: 

<!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">
  .bulb {
    margin: 0px;
    width: 65px;
    height: 65px;
    position: relative;
    background-image: url(img/bulb.png);
}

  </style>

  <script>
  $(document).ready(function() {

$("div").click(function () {
      $(this).effect("bounce", { times:500 }, 500);
});

  });
  </script>
</head>
<div class='bulb'></div>
<div>Dont Bounce</div>
</body>
</html>

Ответы [ 7 ]

1 голос
/ 22 марта 2012

Если вы хотите сбросить элемент неограниченное количество раз, вам нужно создать функцию, которая будет вызывать себя после ее завершения.

см. Мой jsfiddle

Дайте элемент, который вы хотите отразить, определенному классу, в моем случае 'bounce', чтобы отразить только этот элемент. Итак, ваш HTML: 

<div class='bounce'>bouncethis</div>
<div>Dont Bounce</div>

А твой jquery 

$(document).ready(function() {
    bounceDiv()
});

function bounceDiv() {
    $('.bounce').effect("bounce", { times: 1 }, 300,function() {
    bounceDiv()
    });
}

PS. Я не советую делать это, это отвлекает, может быть опасно, потому что это происходит бесконечно.

1 голос
/ 22 марта 2012

Отказов при нагрузке и неограниченное количество раз: http://jsfiddle.net/gmtSS/

$(function(){
    bounce();
});
function bounce(){
    $('.bulb').effect("bounce", {times:1}, 500, function(){bounce();});
}
1 голос
/ 22 марта 2012

Чтобы сбросить на нагрузке: 

$(function() {
    $("div.bulb").effect("bounce", { times:1 }, 500);
});

И продолжать подпрыгивать 

$(function() {
    var interval = setInterval(function(){
        $("div.bulb").effect("bounce", {times:1}, 300);
    },300);
});
1 голос
/ 22 марта 2012

Чтобы отразить только один div, вы должны сделать это: 

$("div.bulb").click(function () {
  $(this).effect("bounce", { times:500 }, 500);
});

Если вы хотите, чтобы он отскочил сразу, вы можете сделать это после привязки поведения клика: 

$('div.bulb').trigger('click');
1 голос
/ 22 марта 2012

JavaScript, который вы показали, выбирает все div, а не только тот, который вы хотите, чтобы выбрать именно этот и заставить его отскочить при загрузке страницы, замените это: 

$("div").click(function () {
    $(this).effect("bounce", { times:500 }, 500);
});

на это:

$("div.bulb").effect("bounce", { times:500 }, 500);
1 голос
/ 22 марта 2012 
$("div")

Выберет ВСЕ div на странице, вы можете добавить селектор для подпрыгивающих div, как: 

<div class="bulb">bounce this</div>
<div>don't bounce</div>

выберите его с помощью: 

$("div.bulb")

Также, если вы хотите, чтобы это происходило при наведении мыши, замените .click на .mouseover

Теперь, чтобы собрать все воедино, вы можете сделать это: 

$("div.bulb").effect(Bounce($(this))).mouseover(Bounce($(this)));

и вне $(document).ready: 

function Bounce(element) {
    element.effect("bounce", { times:500 }, 500);
}
0 голосов
/ 22 марта 2012

Лучший способ, по моему мнению, - это предложение Мэтьюса, привязав эффект к событию щелчка лампочки, а затем вызвать его напрямую с помощью триггера (), например, вы можете вызвать его в любом событии без необходимости щелкать лампочку.

Что до сих пор никто не говорил, так это то, что ваш параметр "times" является довольно "перегрузочным", или вы действительно хотите сбросить его 500 раз? Из-за самого эффекта (уменьшая расстояние отскока после каждого отскока) вы все равно не увидите никаких изменений после нескольких отскоков ... 3 отскока каждые 200 мс, кажется, дают наиболее реалистичный эффект.

Мой jsfiddle 

$(document).ready(function() {
    $('.bulb').bind('click', function() {
        $(this).effect("bounce", { times: 3 }, 200);
    }).trigger('click');
});

Если ваша цель состояла в том, чтобы в течение длительного времени постоянно отскакивать лампочку, вам, вероятно, следует использовать animate () или что-то в этом роде.

редактировать: слегка укороченный код

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...