jQuery：如何在悬停上添加转换，div的BORDER-RADIUS&保证金？ [英] jQuery: How to add transition on hover, div's BORDER-RADIUS & MARGIN?
问题描述
语言： Javascript / jQuery / PHP 要完成，与您在此页面的气泡上看到的悬停效果类似：
https://www.vizify.com/rand-fishkin
使用 CSS3完成了类似的效果，但转换并不像那个页面上的转换那样流畅，所以我选择使用Javascript来代替。
我在这里做的是我增加了宽度& div格式气泡的高度在徘徊时减少10％。
但我不知道如何调整 border-radius 和边际按百分比
$（。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 '}）;
}）;
悬停后：
-
我想调整边界半径，使得即使在徘徊时气泡仍保持圆形
（距离桁架高度/宽度的1/2像素数div size） -
我想将边距更改为1/8负像素（动态分区大小） - 动态 - 当徘徊时div保持不变垂直居中（这样，当它增长时，它不会
简单地向下扩展）。
足够的跳跃， 这里是一个演示 ，反映我迄今为止所做的事情。
目前，我使用固定的边距半径300像素（大于div本身）来保持div即使在徘徊时也是四舍五入的，我正在更改边距（不是基于百分比）。
由于我通过百分比添加增长转换，因此我可以ot做一个静态的边界半径或静态边缘div的hovered。
我的问题是，我如何指定border-radius&如果这是如何扩大10％的宽度：
大小'）。width * 1.1width：$ .data（this，'margins by percentage？
您如何设定保证金为当前身高的1/8？
我已经偶然发现了这个帖子，这是做我想做的： https://stackoverflow.com/a/3630768 / 1399030 （根据百分比划分和输出）
非常感谢，所有帮助都非常感谢！
解决方案爱，
试试这个：
$ b $ （'scale'，function（e，s）{
var data = $ .data（this，'size'）; b），
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]）
}）;
注意
- 通过在样式表中提供过多的边界半径（例如等于宽度），可以保证圆形度（？），而无需对其进行缩放。我认为这将适用于所有浏览器，但需要测试。
- 为避免重复使用代码，我实现了缩放算法作为自定义事件'scale'的处理程序。 b $ b
- 保证金比例保持泡泡的中心位于其原始中心。
- 您将在演示中看到泡泡被包裹在一个静态容器中，该容器保留泡泡可以放入的空间扩大。这将防止整个页面随着气泡增长/缩小而需要回流。其他方法是可用的，例如绝对定位。
Language: Javascript / jQuery / PHP
What I am trying to accomplish, is similar to the hover effect that you see on this page's bubbles:
https://www.vizify.com/rand-fishkinI have accomplished a similar effect using CSS3, but the transition was not as smooth as the one on that page, so I opted with using Javascript instead.
What I'm doing here is I grow the width & height of the div bubble by 10% when hovered.
But I do not know how to adjust the border-radius and margin by percentage?
$(".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' }); });Upon hover :
I want to adjust the border-radius so that the bubble remains round even when hovered (1/2 number of pixels from the height/width of the hovered div size)
I want to change the margin to 1/8 negative pixels (of the hovered div size) - dynamically - when hovered so that the div remains centered vertically (so that when it grows, it does not simply expand downwards).
Enough yapping, here is a demo reflecting what I've done so far.
Currently, I am using a fixed border-radius of 300px (larger than the div itself) to keep the div rounded even when hovered, and I am changing the margin in a static way (not based on percentage).
Since I am adding the grow transition based by percentage, I cannot do a static border-radius or static margins for the hovered div.
My question is, how do I specify border-radius & margins by percentage?
If this is how you expand the width by 10%:
width: $.data(this,'size').width*1.1
How do you set the margin by 1/8 of the current height?I have stumbled upon this post that kind of is doing what I want: https://stackoverflow.com/a/3630768/1399030 (dividing & outputting based on percentage)
Thanks so much, all assistance is really appreciated!
解决方案Love,
Try this:
$(".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]) });NOTES
- By providing an excessive border-radius in the style sheet (eg. equal to width), circularity is guaranteed(?) without needing to scale it. I think this will work in all browsers but needs testing.
- To avoid repetition of code, I implemented the scaling algorithm as a handler of the custom event 'scale'.
- Margin scaling keeps bubble centred on its original centre.
- You will see in the demo that the bubble is wrapped in a static container that reserves space into which the bubble can expand. This will prevent the whole page needing to reflow as the bubble grows/shrinks. Other approaches are available, eg absolute positioning.
这篇关于jQuery：如何在悬停上添加转换，div的BORDER-RADIUS&保证金？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
