获取$（this）类的transform属性，而不是计算内联属性

Question

我有很多圈子。一些通过附加的类缩放0.5，一些.0.6等，例如：getDateTime，circle size-xs，如：

circle size-lg

当我将鼠标放入圆圈时，我将其缩放到1.0 - 但是在mouseout上，我想返回到类中定义的默认比例

<div class="circle size-xs"></div>
<div class="circle size-md"></div>
<div class="circle size-lg"></div>

如果我$('.circle').on('mouseenter', function() { TweenMax.to($(this), 0.5, {scale: 1, ease: Power2.easeOut}); }); $('.circle').on('mouseout', function() { TweenMax.to($(this), 0.5, {scale: someScaleIntFromTheClass], ease: Power2.easeOut}); }); ，我将得到1的内联比例，而不是元素类中定义的比例。

如何在mouseout上获取$（this）类的transform scale属性？

Answer 1

我知道您最初正在寻找一个jQuery解决方案 - 但在此设置中，我倾向于使用CSS解决方案。

尤其是因为当:hover伪类不再适用时，每个div自然会返回到您在样式表中为它声明的默认比例值。

示例：

＆＃13;

＆＃13;

div {
display: inline-block;
width: 100px;
height: 100px;
background-color: rgb(255,0,0);
}

.circle {
border-radius: 50px;
transition: transform ease-out 0.6s;
}

.size-xs {
transform: scale(0.2);
}

.size-md {
transform: scale(0.4);
}

.size-lg {
transform: scale(0.8);
}

.circle:hover {
transform: scale(1);
}

＆＃13;

<div class="circle size-xs"></div>
<div class="circle size-md"></div>
<div class="circle size-lg"></div>

＆＃13;

＆＃13;

＆＃13;