jQuery amazing easing

Question

How to achieve something like there:

http://ofertymieszkan.pl/

(click "DALEJ" green button in the middle and then optinally "podstawowej wyszukiwarce" below "WYSZUKAJ" button)

Element fades in and then elegantly disappears.

Any demos/ideas etc.?

Answer 1

At a quick glance, it's basically just using animate() changing the left and opacity values. Very roughly, this is what their code does:

$('#estate_search_submit').click(function ()
{
    $('#first-step').animate({left: '-=250', opacity: 0});
    return false;
});

http://jsfiddle.net/mattball/7yTK3/2/

That gets the first step to slide away. I'll let you figure out how to get the second step to slide in.

Answer 2

jQuery UI offers this kind of capability and a variety of easing options for its show and hide functions.

If you dig into the code for the site you reference, they are using jQuery and jQuery UI (it's minified and combined into a file called app.js).

Answer 3

jQuery animate(): http://api.jquery.com/animate/ I figure it's simultaneously animating left and opacity.

Here's a quick example I brewed for you: http://jsfiddle.net/PTyue/

Answer 4

It is jQuery. Effects are fade and slide. Use can use main effect animate() and configure you how you want

(links are from jQuery UI documentation)