Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQuery Animate with Effect 'Bounce' after animation is complete?

I've been hunting around for an answer on here, Google, etc., and can't seem to quite nail this one.

I have an image with an ID of #pin01. This is a pin on a map that I have animating down within a div, landing on an image of a map (think Google map).

My JQuery, which works just great, is this:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);

and my HTML is as follows:

<img src="images/pin_blue.png" id="pin01" />

The animation works great, and the pin fades in, and drops on to the map just fine. What I'd like, is a bounce after it has been positioned 305px from the top of the div, so when it's on the map, it will give a little bounce at the end. I thought I'd use this effect:

$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

I figured the final code would go something like this:

$('#pin01').animate({ opacity: 0}, 0).delay(500);
$('#pin01').animate({ opacity: 1, top: "305px" }, 500);
$('#pin01').effect("bounce", { direction:'down', times:5 }, 300);

That results in a bounce, but it returns back to the original starting position for the pin, not retaining the 305px movement. I tried placing a top: on the effect, which didn't work.

I have tried combining, nesting these, etc., nothing seems to be working.

If anyone has any other thoughts, curious to see how to get this to function properly. I think it's a simple tweak, just can't seem to figure it out.

SOLUTION

Removed:

$('#pin01').animate({ opacity: 0}, 0).delay(1000);
$('#pin01').animate({ opacity: 1, top: "350px" }, 500);

Replaced both with a single line from the below answer:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});

Solved the issue of the bounce once on the map.

To add in some fade functionality, I wrote it as follows:

$('#pin01').animate({ opacity: '0' });
$('#pin01').delay(500).show().animate({ top: 305, opacity: '1' }, {duration: 1000, easing: 'easeOutBounce'});

There may be a cleaner way to do the fade, but this worked for my example.

like image 735
stebesplace Avatar asked Apr 20 '12 17:04

stebesplace


People also ask

Which jQuery method is used to stop an animation before it is finished?

The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations. Syntax: $(selector).

Can the animate () method be used to animate any CSS property?

The animate() method performs a custom animation of a set of CSS properties. This method changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect. Only numeric values can be animated (like "margin:30px").

Is jQuery good for animation?

The jQuery library provides several techniques for adding animation to a web page. These include simple, standard animations that are frequently used, and the ability to craft sophisticated custom effects.

What is the correct syntax of animate () method?

The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback);


1 Answers

Try with:

$('#pin01').show().animate({ top: 305 }, {duration: 1000, easing: 'easeOutBounce'});
like image 169
Roko C. Buljan Avatar answered Oct 07 '22 17:10

Roko C. Buljan