更改 jQuery 中元素的大小，同时保持 CSS 中的相对大小变化

Question

我有一个元素，它是一个圆圈，悬停时会变大，单击时会稍微缩小。这是使用 :hover 和 :active CSS 伪类:

完成的

#circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transition-duration: 0.2s;
}
#circle:hover {
    width: 120px;
    height: 120px;
}
#circle:active {
    width: 110px;
    height: 110px;
}

如果我使用以下 jQuery 来增加圆圈的大小，那么即使将鼠标悬停在上方或单击（可以理解），圆圈仍保持该大小。

var circle = $("#circle");
circle.width(200);
circle.height(200);

JSFiddle available here.

如何增加 jQuery 中圆圈的大小，但在鼠标悬停时仍会增大，而在单击时会略微缩小？例如。当我将大小设置为 200px 时，悬停时它将增长到 240px，单击时将增长到 220px。

注意： 100px 和 200px 等值只是示例。我正在寻找一种解决方案，它允许我将圆圈的大小更改为任意大小，并且仍然在 hover/click 上保持 growing/shrinking。

Answer 1

您可以使用 jQuery .mouseover() 和 .mouseleave() 事件。你可以看到更新后的 jsFiddle here

var circle = $("#circle");
circle.css('border-radius', '50%');
circle.mouseover(function(){
    circle.css('width', '200px');
  circle.css('height', '200px');
});

circle.mouseleave(function(){
    circle.css('width', '100px');
  circle.css('height', '100px');
});

编辑：

var circle = $("#circle");
var width = circle.width();
circle.mouseover(function(){
  circle.css('width', width*1.2);
  circle.css('height', width*1.2);
});

circle.mouseleave(function(){
  circle.css('width', width);
  circle.css('height', width);
});

circle.click(function(){
  circle.css('width', width*1.1);
  circle.css('height',width*1.1);
});

Answer 2

首先，始终将圆的边界半径设置为 50%，如下所示：

#circle {
    border-radius: 50%;
}

然后，删除你的#circle:hover 和#circle:active CSS 语句。

最后，将您当前的 jQuery 代码替换为以下代码：

var circle = $("#circle");

circle.click(function() {
    circle.width(200);
    circle.height(200);
});

circle.mouseover(function() {
    circle.animate({
        height: "+=20",
        width: "+=20"
    }, 250);
});

circle.mouseleave(function() {
    circle.animate({
        height: "-=20",
        width: "-=20"
    }, 250);
});

circle.mousedown(function() {
    circle.animate({
       height: '-=10',
       width: "-=10"
    }, 250);
});

大小的变化目前需要 250 毫秒，但您只需更改 animate() 函数末尾的值即可轻松调整。

Answer 3

我为此找到了一个 CSS 解决方案：将圆放入容器 div 中，这样 width 和 height 在 CSS 可以相对于容器的大小，然后改变容器的大小而不是圆。这需要使用 transform 来保持圆圈居中，但似乎效果很好。

<div id="container">
    <div id="circle"></div>
</div>

CSS:

#container {
    width: 100px;
    height: 100px;
    transition-duration: 0.2s;
}
#circle {
    transition-duration: 0.2s;
    border-radius: 50%;
    width: 100%;
    height: 100%;
}
#circle:hover {
    width: 120%;
    height: 120%;
    transform: translate(-10%, -10%);
}
#circle:active {
    width: 110%;
    height: 110%;
    transform: translate(-5%, -5%);
}

更改圆圈大小的示例：

var circle = $("#circle");
var container = $("#container");
circle.click(function() {
    container.width(200);
    container.height(200);
});

JSFiddle here

更改 jQuery 中元素的大小，同时保持 CSS 中的相对大小变化

Changing the size of an element in jQuery while maintaining relative size changes in CSS

css

jquery

hover