CODEWITHSUNDEEP
jqueryjquery-ui
F. Hurgle
F. Hurgle

Reputation: 33

Using jQuery UI's show function, not getting the desired effect

I've been scratching my head on this one for a while, but I'm wondering if anyone has an idea how I can recreate a specific effect using jQuery's show function. What I would like to do is slide my header/navigation bar onto the page from the top down, with ALL of the elements within the header tag moving with the animation.

So far, I've tried $('header').slideUp(1000) which is gives the effect of a curtain being drawn up, but the elements within the header are static.

I also tried $('header').show('drop', {direction: 'up'}, 1000), but this gives the effect of a kind of fade in before it drops down. I would like it to slide down from the top. The only similar example that I have been able to find is similar to the header on http://www.sproutcore.com, but I believe that they are using CSS3 for this effect.

Is there a simple way to accomplish this with jQuery's show()?

Thanks for reading!

Upvotes: 0

Views: 2919

Answers (3)

rossipedia
rossipedia

Reputation: 59377

See if this does what you want: http://jsfiddle.net/bryanjamesross/hHmpH/

The problem is that slideDown and slideUp animate the height, not the position. So what happens is that the container's height get's smaller/larger, while the content does not.

slideDown and slideUp should really be called expandVertical and contractVertical (or possibly squeeze).

Upvotes: 0

samura
samura

Reputation: 4395

See this example I made: http://jsfiddle.net/hFBc8/1/

HTML

<div class="menu">
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</div>
<div class="sub-menu">
<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>
</div>

Javascript

var h = $('.sub-menu').height();
$('.sub-menu').css('top', -h);

$('.menu').hover(
    function(){
        $('.sub-menu').animate({top: 0});
    },
    function(){
        $('.sub-menu').animate({top: -h});
    }
);

CSS

.menu li {
    float: left;
    padding: 10px 20px;
}
.menu {
    background: #ffff33;
    overflow: auto;
    z-index: 10;
    position:relative;
}
.sub-menu {
    position: relative;
    top: 0;
}

Upvotes: 0

user910533
user910533

Reputation:

Without seeing your HTML/CSS it's hard to tell if there's an issue there, but;

Have you tried setting your header to display:none then.

$('#header').slideDown(1000);

I can't imagine .slideUp() would give you the effect you're after.

Also you could try setting your header height to 0 and applying on page load:

$('#header').animate({
  height : 100px
},{
  queue : false,
  duration : 1000
});

But that might show some funky issues with headers internal content.

If you're set on using .show() + UI, then slide should work.

$('#header').show({
  effect : 'slide',
  easing : 'easeOutQuart',
  direction : 'down',
  duration : 1000
});

Upvotes: 1

Related Questions