将slietoogle效果添加到隐藏并显示div

Question

您好我正在使用javascript来隐藏或显示div。

这里是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"); 


    }); 
}); 

所以，当鼠标悬停在9px高度#nav，我#nav得到84px高度和image_thumbnails获得可见，当鼠标移开回9px高度和隐藏图像。

我想动画添加到这个代码，例如slideToogle ...

的DIV高度和公开程度 任何人可以形象不透明度帮助我呢？

感谢您的帮助，

Answer 1

使用jQuery Animate， 尝试：

$(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