jQuery：如何在悬停、div 的 BORDER-RADIUS 和 MARGIN 上添加过渡？

Posted 2023-05-09

【中文标题】jQuery：如何在悬停、div 的 BORDER-RADIUS 和 MARGIN 上添加过渡？

【英文标题】：jQuery: How to add transition on hover, div's BORDER-RADIUS & MARGIN?

【发布时间】：2012-10-23 19:33:16

【问题描述】：

语言：Javascript / jQuery / PHP

我想要实现的效果类似于您在此页面的气泡中看到的悬停效果：https://www.vizify.com/rand-fishkin

我使用 CSS3 实现了类似的效果，但过渡不如该页面上的平滑，因此我选择使用 javascript。

我在这里所做的是悬停时将 div 气泡的宽度和高度增加 10%。

但是不知道怎么调整border-radius和ma​​rgin的百分比？

$(".colored-bg").each(function() 
    $.data(this, 'size',  width: $(this).width(), height: $(this).height() );
).hover(function() 
    $(this).stop().animate( height: $.data(this,'size').height*1.1, 
                         width: $.data(this,'size').width*1.1,
                         margin: '-13.5px auto' );
, function() 
$(this).stop().animate( height: $.data(this,'size').height, 
                         width: $.data(this,'size').width,
                         margin: '-13.5px auto' );
);

悬停时：

我想调整边框半径以使气泡保持圆形 即使悬停（悬停的 div 大小的高度/宽度的 1/2 像素数）

我想将边距更改为 1/8 负像素（悬停的 div 大小） - 动态 - 悬停时使 div 保持垂直居中（这样当它增长时，它不会 只需向下扩展）。

够了，here is a demo反映了我到目前为止所做的事情。

目前，我使用 300px 的固定边框半径（大于 div 本身）以使 div 即使在悬停时也保持圆形，并且我正在以静态方式更改边距（不是基于百分比）。

由于我添加了基于 百分比 的增长过渡，因此我无法为悬停的 div 设置静态边框半径或静态边距。

我的问题是，如何按百分比指定边框半径和边距？

如果这是您将宽度扩大 10% 的方式：width: $.data(this,'size').width*1.1 如何将边距设置为当前高度的 1/8？

我偶然发现这篇文章正在做我想做的事：https://***.com/a/3630768/1399030（根据百分比进行除法和输出）

非常感谢，非常感谢所有帮助！

【问题讨论】：

按当前值的百分比工作是行不通的 - 不适用于高度、宽度、边框半径或其他任何东西。看到.stop() 命令了吗？这意味着每个动画的起点不一定是前一个动画的预期终点。您需要存储初始值，例如使用.data()，并在所有情况下都使用这些值，即如果下限为 x，则上限为 x*1.1。

目前，这是存储宽度和高度（第 2 行），但有没有办法存储 div 的边距和边框半径？ jQuery 有$(this).height()，但是边距和边框半径可以用什么？感谢您的答复！我不知道该怎么做...我发现 2 个链接问几乎同样的事情：***.com/a/3630768/1399030 || ***.com/q/590602/1399030

噢！对不起 - 我误读了代码。你已经按照我的建议去做了。我刚起床，还没有喝咖啡。

^LOL 完全可以理解！我正在尝试其他事情，如何喷出相对于高度的边距margin: $.data(this,'size').height*1.2 margin: X auto。我不知道如何通过 jQuery 使 X 动态化。

【参考方案1】：

爱，

试试这个：

$(".bubble").on('scale', function(e, s) 
    var data = $.data(this, 'size'),
        w = data.width,
        h = data.height;
    $(this).stop().animate(
        width: w * s,
        height: h * s,
        marginLeft: data.marginLeft - w * (s-1) / 2,
        marginTop: data.marginTop - h * (s-1) / 2
    );
).each(function() 
    var $this = $(this);
    $.data(this, 'size', 
        width: $this.width(),
        height: $this.height(),
        marginLeft: parseInt($this.css('margin-left')),
        marginTop: parseInt($this.css('margin-top'))
    );
).hover(function() 
    $(this).trigger('scale', [1.1]);
, function() 
    $(this).trigger('scale', [1.0])
);

DEMO

注意事项

通过在样式表中提供过多的边框半径（例如，等于宽度），可以保证圆形度（？），而无需对其进行缩放。我认为这适用于所有浏览器，但需要测试。 为避免代码重复，我将缩放算法实现为自定义事件“缩放”的处理程序。 边距缩放使气泡保持在其原始中心的中心。 您将在演示中看到气泡被包裹在一个静态容器中，该容器保留了气泡可以展开的空间。这将防止整个页面随着气泡的增长/收缩而需要重排。也可以使用其他方法，例如绝对定位。

【讨论】：

非常感谢，我会用这个！ :) 感谢您的回复和帮助。