jquery - 如何在 CSS3 in-till mouseleave 中保持元素缩放？然后在 mouseleave 上将元素缩放回原来的大小

Question

当我在按钮上使用 mouseenter 时，我希望在单独的元素上触发 CSS3 动画中的缩放命令。

我的代码目前执行此操作，但是我需要将比例保持在完成点直到 mouseremove，然后缩放的元素需要缩放回初始尺寸。

我该怎么做呢？

这是我的代码：

$("#button").mouseenter(function() {
$('.transform').toggleClass('classname');
});

CSS：

.transform {
-webkit-transition: all 2s ease;  
-moz-transition: all 2s ease;  
-o-transition: all 2s ease;  
-ms-transition: all 2s ease;  
transition: all 2s ease;
}

.classname {
-webkit-animation: cssAnimation 1.000s 1 ease;
-moz-animation: cssAnimation 1.000s 1 ease;
-o-animation: cssAnimation 1.000s 1 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: scale(1.000) }
to { -webkit-transform: scale(0.800) }
}

谢谢你。

Answer 1

Use the .hover() event handler instead.

change mouseenter to hover

$("#button").hover(function() {
    $('.transform').toggleClass('classname');
});

Which is the same as

$("#button").on('mouseenter mouseleave', function() {
    $('.transform').toggleClass('classname');
});

---

The first part was based on how to remove the class..

But you do not need to use animations for the scaling.. just transitions will do.

And since transition go both ways by default it will handle the scale up automatically once you remove the class.

Demo at http://jsfiddle.net/3tsuS/