Reputation: 4319
I am trying to make a "slide in" toolbox on a div. When the div loads, the sliding content is moved all the way to the right of the parent, except a bit the user can click on. Then when they click it, the sliding content should slide in.
I use this function to slide in/out:
$(function () {
$("#clickme").toggle(function () {
$(this).parent().parent().animate({right:'-40px'}, {queue: false, duration: 500});
}, function () {
$(this).parent().parent().animate({right:'-320px'}, {queue: false, duration: 500});
});
});
See: http://jsfiddle.net/ySQgm/
However, when the slider is collapsed, you still see the content outside the div, but I want it to be hidden and then elegantly slide in.
Upvotes: 0
Views: 42
Reputation: 5165
To the #container element, add
overflow:hidden;
That will leave just the arrow and edge visible.
Upvotes: 3