adding slietoogle effect to a hide and show div

Question

Hello I'm using a javascript to hide or show a div.

here is the JS :

$(function() {

  $('#nav').css("height","9px");


   $('#nav').mouseover(function() {
       $('#nav').css("height","84px");
       $('.image_thumbnails').css("visibility","visible");

});
       $('#nav').mouseout(function() {
       $('#nav').css("height","9px");
       $('.image_thumbnails').css("visibility","hidden");


   });
});

so when mouseover the 9px height #nav, my #nav gets 84px height and the image_thumbnails get visible, and when mouseout back to 9px height and images hidden.

I would like to add animation to this code, like slideToogle...

for the div height and for the image opacity of visibilty can anybody helps me with this ?

thanks for your help,

Answer 1

Use jQuery Animate, try:

$(function () {
    // Cache nav for better performance
    $nav = $('#nav');
    // Same for thumbnails
    $thumbnails = $('.image_thumbnails');

    $nav.on('mouseenter', function () {
        // Use stop to clear the animation queue and jump to the end
        $nav.stop().animate({
            height: "84"
        }, "slow");
        $thumbnails.stop().animate({
            opacity: 1
        }, "slow");

    });
    $nav.on('mouseleave', function () {
        $nav.stop().animate({
            height: "8"
        }, "slow");
        $thumbnails.stop().animate({
            opacity: 0
        }, "slow");
    });
});

JSFIDDLE