jQuery缓和在animate()调用中不起作用 [英] jQuery easing not working in my animate() call

问题描述

我在页面的中央区域 上有4个圆形按钮.将它们悬停在其中一个上会使它变大，但是我想为这些按钮的增减运动添加一些缓动/弹跳效果.

I have 4 circular buttons located towards the central area on my page. Hovering one of them makes it grow in size, but I want to add some easing/bouncing effect to both the growing and shrinking movements of these buttons.

但是由于某种原因，缓动部分不起作用.我确实在页面中添加了缓动插件:

However for some reason the easing part doesn't work. I did add the easing plugin to my page:

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

以下是按钮行为的代码:

Here's the code for the buttons' behaviour:

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

推荐答案

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

You put the easing: specifier in the wrong position. It should be like this:

$(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示例，因此您可以根据自己的喜好调整设置:

Here is a jsFiddle example I prepared for you so you can tweak the settings to your liking:

别忘了查看此简化秘诀表，它可以使您更好地了解每个缓动功能的确切含义做.祝你好运！

And don't forget to check out this easing cheatsheet which gives you a better impression of what each easing function exactly does. Good luck!

这篇关于jQuery缓和在animate()调用中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！