我有 4 个圆形按钮,位于中心区域在我的页面上 http://goo.gl/yacZly。将鼠标悬停其中一个会使其尺寸增大,但我想为这些按钮的增大和缩小运动添加一些缓动/弹跳效果。
但是由于某种原因,缓动部分不起作用。我确实将缓动插件添加到我的页面中:
<script src='js/jquery.easing.1.3.js'></script>
以下是按钮行为的代码:
$('.egg_button')
.on('mouseenter', function(){
var div = $(this);
div.stop(true, true).animate({
margin: -5,
width: "+=10",
height: "+=10",
backgroundSize: "30px",
specialEasing: {
width: "easeOutBounce",
height: "easeOutBounce"
}
}, 'fast');
})
.on('mouseleave', function(){
var div = $(this);
div.stop(true, true).animate({
margin: 0,
width: "-=10",
height: "-=10",
backgroundSize: "22px",
specialEasing: {
width: "easeOutBounce",
height: "easeOutBounce"
}
}, 'fast');
})