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可见，当mouseout返回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

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

1 个答案: