CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui
dB'
dB'

Reputation: 8330

JQuery -- how to implement an animation like the show/hide behaviour of the mac os dock?

I'm trying write a web app that has a div of widgets on the right-hand side of the browser window. I'd like to show and hide this div dynamically, with a style similar to that of the mac os x dock. That is, I'd like the widget div to "slide out" from the side of the browser window when the mouse approaches, and then to "slide back in" when the mouse leaves the div.

I'm using JQuery and JQuery UI.

Can anyone give me any pointers on how I might implement something like this?

Thanks,

D.

Upvotes: 1

Views: 1296

Answers (3)

Chan
Chan

Reputation: 2641

Best possible way is to look through the Effects library of jQuery UI. You'll be surprised since it has a plenty. Here is a link to the Slide animation in jQuery UI.

The code would probably look something like this -

$("#undercover").hover(function () {
      $(this).show("slide", { direction: "right" }, 1000);
}, function(){
      $(this).hide("slide", { direction: "left" }, 1000);
});

I didn't test out the code so it might need some changes. The #undercover div is something like the sensitive region of the dock. When the dock need to slide it will by detecting hover event on #undercover div.

But if you don't won't waste much time working on with jQuery UI and jQuery much - You could go ahead and use jqDock. That idea was from Alan Bellows.

Upvotes: 0

Alan Bellows
Alan Bellows

Reputation: 1831

There is a jQuery plugin call jqDock that should do most (or all) of the work for you.

Upvotes: 1

Thiago
Thiago

Reputation: 11

take a look at twitter bootstrap. They use on effect called colapse.

http://twitter.github.com/bootstrap/javascript.html#collapse

Upvotes: 1

Related Questions