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

【问题标题】：Changing the size of an element in jQuery while maintaining relative size changes in CSS改变 jQuery 中元素的大小，同时保持 CSS 中的相对大小变化
【发布时间】：2016-06-16 11:39:35
【问题描述】：

我有一个元素，它是一个圆圈，当鼠标悬停在上面时会增大，点击时会略微缩小。这是使用: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 等值只是示例。我正在寻找一种解决方案，可以让我将圆圈的大小更改为任意大小，并且在悬停/单击时仍保持增长/缩小。

【问题讨论】：

标签： jquery css hover

【解决方案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);
});

【讨论】：

这不是我想要做的。单击圆圈后，我希望它的大小为 200 像素，悬停时为 240 像素，单击时为 220 像素。我已更新问题以反映这一点。
当鼠标离开圆圈时，您需要圆圈的大小。对不起我的英语
无论圆圈之前的大小。如果圆圈是100px，鼠标离开时需要100px，如果圆圈是200px，鼠标离开时需要200px。我不认为你的解决方案能解决这个问题。
不，这仍然不是我想要的。我正在寻找可以动态地使圆圈在悬停/单击时增大/缩小的东西，即使圆圈的大小动态改变。

【解决方案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() 函数末尾的值来轻松调整。

【讨论】：

我可以使用百分比而不是硬编码值吗？ :active 的等价物呢？
抱歉，完全忘记了 :active。编辑了 jQuery，它现在具有 mousedown() 函数的 :active 效果。我不是 100% 确定你是否可以在这个概念中使用百分比值，我尝试将 += 和 -= 更改为 *= 但它没有用。不过，我确信有一种方法可以使用百分比。
相对大小的东西确实是我正在寻找的东西。它还需要mouseup 函数来完全模仿:active。但是事件然后动画是不一样的：如果您单击圆圈多次，动画将在您停止单击后继续播放。此外，同时添加mouseup 和mousedown 似乎会停止click 事件的工作。

【解决方案3】：

我为此找到了一个 CSS 解决方案：将圆圈放在容器 div 中，以便 CSS 中的 width 和 height 可以相对于容器的大小，然后更改大小容器而不是圆圈。这需要使用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

【讨论】：