CODEWITHSUNDEEP
jquerycssjquery-ui
Ma9ic
Ma9ic

Reputation: 1125

On Load jquery, divs bounce ui

Hope someone can help i cant seem to get my head around this, i would like to load the jquery animation onload and let it to bounce unlmited number of times instead of having to click it.

Also it seems to bounce all my divs?

Any ideas here is what i have so far:

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

Upvotes: 0

Views: 3062

Answers (7)

Seimen
Seimen

Reputation: 7250

Best way imo is Matthews suggestion by binding the effect to the click event of the bulb and then call it directly by trigger(), like this you can call it on any event without the necessity of clicking the bulb.

What no one said until now is that your "times" parameter is quite an "overload", or do you really want to bounce it 500 times? Because of the effect itself (reducing the bounce distance after each bounce) you can't see any change after a few bounces anyway... 3 bounces every 200ms seems to get the most realistic effect.

My jsfiddle

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

If your goal was to repeatedly bounce the bulb the same way over a long period you should probably use animate() or something like that.

edit: slightly shortened code

Upvotes: 0

r0m4n
r0m4n

Reputation: 3512

To bounce on load:

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

And to continue to bounce

$(function() {
    var interval = setInterval(function(){
        $("div.bulb").effect("bounce", {times:1}, 300);
    },300);
});

Upvotes: 1

naspinski
naspinski

Reputation: 34697

$("div")

Will choose ALL divs on the page, you might want to add a selector for the bouncing divs like: 

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

the select it with:

$("div.bulb")

Also, if you want it to happen on mouseover, replace .click with .mouseover

Now to put it all together, you can do this:

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

and outside the $(document).ready:

function Bounce(element) {
    element.effect("bounce", { times:500 }, 500);
}

Upvotes: 1

Tim
Tim

Reputation: 9489

If you want to bounce the element unlimited times, you have to create a function which calls itselved after the function is finished.

See my jsfiddle

Give the element you want to bounce a certain class, in my case 'bounce' to only bounce this element. So your html:

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

And your jquery

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

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

PS. I don't advice to do this, it's distracting, could be possible dangerous because it loops endlessly.

Upvotes: 1

cchana
cchana

Reputation: 5000

The JavaScript you've shown selects all divs, not just the one you want, to select just that one and to get it to bounce when the page loads replace this:

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

with this:

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

Upvotes: 1

Alex
Alex

Reputation: 6406

To bounce on load and unlimited times: http://jsfiddle.net/gmtSS/

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

Upvotes: 1

Matthew Hanlon
Matthew Hanlon

Reputation: 171

To bounce only the one div, you should do this:

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

If you want it to bounce right away you could do this after you bind the click behaviour:

$('div.bulb').trigger('click');

Upvotes: 1

Related Questions