jquery - 如何使用 css 或 jquery 显示隐藏的 div 并更改大小？

Question

比如说，如果您将鼠标悬停在一个按钮上，则会弹出另一个 div，并且它的背景会变为更大的尺寸。

我已经尝试使用 CSS 转换来执行此操作，但问题是我希望当鼠标没有悬停在按钮上时效果立即停止。相反，在 div 缩放到更大的尺寸后，它会调整到原来的较小尺寸，然后然后消失。我使用可见性属性来隐藏和显示 div。

决定转而使用 jquery，我已经尝试使用 animate() 来调整 div 背景图像的大小，但是 jquery 显然还不支持。

关于如何实现这种效果有什么建议吗？

编辑:

这是一个 jsfiddle 示例 http://jsfiddle.net/dRF3r/1/

html

<div class="pointer">Hover
<div id="circle_bottom"></div>
<div id="circle_top"></div>
</div>

CSS

.pointer {
    background: pink;
    width: 50px;
    height: 50px;
    position: relative;
}
#circle_bottom {
    position: absolute;
    top: 80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: green;
    transition:           All 0.5s ease;
                    -webkit-transition: All 0.5s ease;
                    -moz-transition:    All 0.5s ease;
                    -o-transition:      All 0.5s ease;
    visibility: hidden;
}
#circle_top {
    position: absolute;
    top: 90px;
    left: 10px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: orange;
    transition:           All 0.5s ease;
                    -webkit-transition: All 0.5s ease;
                    -moz-transition:    All 0.5s ease;
                    -o-transition:      All 0.5s ease;
    visibility: hidden;

}
.pointer:hover #circle_bottom {
    transform: rotate(0deg) scale(1.1) skew(0deg) translate(0px, -10px);
    -webkit-transform: rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -moz-transform:    rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -ms-transform:     rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    -o-transform:      rotate(0deg) scale(1.1) skew(0deg) translate( 0px, -10px);
    visibility: visible;
}

.pointer:hover #circle_top {
    transform: rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -webkit-transform: rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -moz-transform:    rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -ms-transform:     rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    -o-transform:      rotate(0deg) scale(1.17) skew(0deg) translate( 0px, -10px);
    visibility: visible;
}

请注意圆圈在消失前如何调整为较小的形状。有办法解决这个问题吗？

这是查看我想要的图片的链接:http://i41.tinypic.com/2r1zrwm.jpg

我的目标是当指针悬停时，圆圈会出现并变大一点。这个概念是将 div 相互堆叠。

Answer 1

如果你想要 jQuery，你可以使用 hover 事件和 animate 方法

$('div').hover(function() {
    $(this).animate({
        "border-width": "20px"
    });
}, function() {
    $(this).animate({
        "border-width": "10px"
    });
});

jsFiddle