Member Avatar for Siberian

This is a follow up to another thread, lets say the other thread didn't occur, kapeesh :) !

This code is telling me I'm missing a semi-colon, I can't see where it's missing the code looks clean to me ?

  • 2 Contributors
  • 2 Replies
  • 209 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Siberian

Dani AI

Generated

Good call by fixing the syntax — once that was out of the way the remaining symptom (the div vanishing instead of “bouncing”) points to runtime/animation issues rather than parsing errors. The two most likely causes are (1) the easing function you asked for isn’t available to jQuery and (2) the CSS for the element means bottom can’t be animated in the way you expect. The checklist and examples below will get you to a working bounce quickly.

Include an easing provider or use jQuery UI’s bounce effect. Core jQuery only understands swing and linear; easeOutBounce comes from jQuery UI or the jQuery Easing plugin. Either include that script (after jQuery) or switch to the UI effect API:

<!-- load jQuery first, then jQuery UI (or an easing plugin) -->
<script src="path/to/jquery.js"></script>
<script src="path/to/jquery-ui.js"></script>

$('#panel').effect('bounce', { times: 3, distance: 60 }, 700);

Make sure the element can animate bottom and use explicit units. If bottom is auto or the element is static-positioned, the animation will behave oddly. Example CSS + animate:

#panel { position: absolute; bottom: 0; left: 0; }

var easing = ($.easing && $.easing.easeOutBounce) ? 'easeOutBounce' : 'swing';
$('#panel').animate({ bottom: '-900px' }, 1300, easing);

Quick debugging checklist

  • Open the console: any “undefined” or missing-script errors?
  • Check Network: confirm jQuery UI / easing plugin loaded and appears after jQuery.
  • Try a known-good easing (swing) to see if movement works — if it does, easing is the culprit.
  • Inspect computed styles: is bottom changing? Is overflow on a parent clipping the element? Is display or visibility toggled?
  • Verify markup wasn’t accidentally broken while editing text content (as noted).

Following those steps will reveal whether you need the extra library, a CSS fix (position/units/overflow), or a different API (.effect('bounce') vs .animate(...)).

Recommended Answers

All 2 Replies

Member Avatar for jresponse

You do have an error - the opening brace after the animate properties object.

    bottom: '-900'
    }, {
        duration: 1300,
        easing: 'easeOutBounce'

See my modified fiddle for a version that works. b.t.w - it has been a while now since Google has blocked cross domain embedding. I replaced your www.google.com with www.bbc.co.uk just to get things working.

By and large when you run into this kind of issue and cannot see an immediately obvious cause the best strategy is to corral the problem into a progressively smaller corner by commenting out the code that may be at the root of the issue.

Member Avatar for Siberian

The words in the code where the problem. Here is everything working, except for the bounce effect. The div disappears instead of bounce !

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.