DEMO

Question

我有4个圆形按钮，位于中央区域on my page。将它们中的一个悬停使其尺寸增大，但我想为这些按钮的增长和缩小运动添加一些缓和/弹跳效果。

但由于某些原因，宽松部分不起作用。我确实在页面中添加了缓动插件：

<script src='js/jquery.easing.1.3.js'></script>

这里是按钮代码＆＃39;行为：

$('.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');
    })

Answer 1

您将easing:说明符放在错误的位置。它应该是这样的：

$(document).ready(function(){
    $(".egg_button").hover(
        function() {
            var div = $(this);
            div.stop(true, true).animate({
                margin: -5,
                width: "+=10",
                height: "+=10",
                backgroundSize: "30px",         // Instead of here ..
            }, {
                duration: 500, 
                queue:false, 
                easing: 'easeOutBounce'         // .. put it here
            });
        },
        function() {
            var div = $(this);
            div.stop(true, true).animate({
                margin: 0,
                width: "-=10",
                height: "-=10",
                backgroundSize: "22px",        // Instead of here ..
            }, {
                duration: 500, 
                queue:false, 
                easing: 'easeOutBounce'        // .. put it here
            });
        }
    );
});

这是我为您准备的jsFiddle示例，因此您可以根据自己的喜好调整设置：

DEMO

并且不要忘记查看此easing cheatsheet，它可以让您更好地了解每个缓动函数的确切功能。祝你好运！

jQuery缓动不能在我的animate（）调用中工作

1 个答案:

DEMO