將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