Question

i’m trying to create a flyup for a block on hover similar to the one in the following link…

http://p2power.com/

Its just below the slide show… How do i create the exact effect using jquery?

Answer 1

Here is a very basic example. You could do all this with CSS3 now, but here’s the jQuery way.

HTML:

<div class="box">
    <div class="inner">
        <p>Content</p>
    </div>
</div>

CSS:

.box {
    position: absolute;
    bottom: 0;
    width: 200px;
    height: 0;
    overflow: hidden;
}

.inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

jQuery:

$('.box').hover(function(){
    $(this).animate({
        height: 200
    });
},function(){
    $(this).animate({
        height: 0
    });        
});

You can test the code here.

That should do it!

Hope that helps 🙂