CODEWITHSUNDEEP
javascriptjqueryhtml
iConnor
iConnor

Reputation: 20189

Slide Down in jQuery

I am looking to gain a effect on my page similar to host-gators live chat thing, I've looked here and this is similar to what I'm trying to achieve but there is one problem the div like starts at height:1px and slides the div down to its original height, what I want is for the divs height to always be the same and it slide down from the top of the page and not the top of the div, I hope this explains it well.

Upvotes: 0

Views: 124

Answers (1)

yckart
yckart

Reputation: 33378

What you mean is a blind-effect. Take a look here: http://fiddle.jshell.net/cZQTR/

I've written a small plugin for that fx:

jQuery.fn.blindToggle = function (duration, easing, complete) {
    return this.animate({
        marginTop: parseFloat(this.css('marginTop')) < 0 ? 0 : -this.outerHeight(true)
    }, jQuery.speed(duration, easing, complete));
};

Update

jQuery.fn.blindUp = function (duration, easing, complete) {
    return this.animate({
        marginTop: -this.outerHeight(true)
    }, jQuery.speed(duration, easing, complete));
};

jQuery.fn.blindDown = function (duration, easing, complete) {
    return this.animate({
        marginTop: 0
    }, jQuery.speed(duration, easing, complete));
};

demo

Upvotes: 1

Related Questions