1

我希望模拟http://www.templatemonster.com/flash-templates/27545.html上的效果（当您尝试将鼠标悬停在缩略图上时）。

我正在使用 jQuery 和缓动插件，这就是我到目前为止所拥有的：http: //jsfiddle.net/RtYMV/

JS：

$(document).ready(function() {
    $('.line a').hover(
        function() {
            $(this).find('img').stop().animate({
                width: '88px',
                height: '88px',
                top: '6px',
                left: '6px',
                easing: 'easeInBounce'}, 111);
        },
        function() {
            $(this).find('img').stop().animate({
                width: '100px',
                height: '100px',
                top: '0',
                left: '0',
                easing: 'easeOutBounce'}, 111);
    });
});

但显然我在运行缓动插件时遇到了问题。

4

1 回答 1

1

该.animate()函数可以接收每个选项的单独参数或两个对象映射参数，第一个用于指示 css 属性，第二个用于指示其余属性，因此，您的代码应如下所示：

$(document).ready(function() {
    $('.line a').hover(
        function() {
            $(this).find('img').stop().animate({
                width: '88px',
                height: '88px',
                top: '6px',
                left: '6px'},
                {easing: 'easeInBounce',duration: 111});
        },
        function() {
            $(this).find('img').stop().animate({
                width: '100px',
                height: '100px',
                top: '0',
                left: '0'},
                {easing: 'easeOutBounce',duration: 111});
    });
});

此外，您没有在 jsfiddle 中包含 jquery easing 插件（在侧边栏的“管理资源”部分执行）。

查看工作演示

于 2012-11-29T12:16:56.087 回答