CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Samia Ruponti
Samia Ruponti

Reputation: 4038

JQuery animate with slidedown

My top nav has an animation. While scrolling down it works fine, but the animation comes with fade effect. What i want is slidedown effect of the background. As scroll doesn't trigger the slide down, Cant make it work like sliding down. can anyone help me?

here is my site:

http://goo.gl/8xt1XZ

and here is my code:

$(function() {
var floating_navigation_offset_top = $('#floating-nav').offset().top;
$(window).scroll(function(){
    var scrollTop = $(window).scrollTop();
    if(scrollTop > floating_navigation_offset_top)
        $('#floating-nav').stop().animate({'opacity':'1'},800).css({'position':'fixed','top': '0', 'z-index': '99'});
    else   
        $('#floating-nav').stop().animate({'opacity':'0'},40);
});

});

Upvotes: 1

Views: 12748

Answers (1)

T J
T J

Reputation: 43166

From what I understand, if you want a slide down effect, instead of animating opacity, simply animate the height from 0 to the height of your slide down menu.

update:

Even better, as per Alexander Lozada's comment, you can use .slideDown() function.

$(selector).slideDown(speed,callback);

further update: as requested, here's a simple fiddle

note: for slideDown to work, element should be hidden by JQ methods such as slideUp(), or css display:none etc

Upvotes: 4

Related Questions