将 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