CODEWITHSUNDEEP
jqueryanimationeffects
NatashaTheRobot
NatashaTheRobot

Reputation: 6949

How Do I reproduce the slide show animation with JQuery with tooltip?

On CarRentals.com, there is a cool animation when you hover over the "features" button: http://www.carrentals.com/us/search/sfo/2013-02-08-10-00/61010/2013-02-11-10-00. This is done with the JQuery tooltip library.

How do I reproduce this animation for a hidden container (not a tooltip) on click?

Upvotes: 0

Views: 257

Answers (3)

NatashaTheRobot
NatashaTheRobot

Reputation: 6949

I was able to come really close by first making my popup hidden with opacity of 0 and margin-top as where I wanted the animation to start, and then executing the following on click: 

$popup.show(1).animate({opacity: 1,
                        top: ($popup.position().top - 30)
                        }, 'fast')

To hide the popup, I had to reset the CSS correctly: 

$popup.animate({ opacity: 0.5,
                 top: ($popup.position().top - 10)
    }, 'fast', function() {
      $popup.fadeOut('slow');
      $popup.css({'display': 'none', 'opacity': 0, 'top': '12px'})
    });

Upvotes: 0

Plynx
Plynx

Reputation: 11461

It's a combination of slideUp and fadeIn. You just execute these two animations on your positioned, hidden div in parallel.

Upvotes: 0

jahrichie
jahrichie

Reputation: 1235

I know you didn't want a tooltip, but why not populate the hidden info in a title or rel attribute and use something like this:

http://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

I use it everywhere, very customizable, smart, and slick.

Upvotes: 1

Related Questions