Question

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

我正在使用jQuery和easing插件，这是我到目前为止所拥有的：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);
    });
});

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

Answer 1

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

$(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缓动插件（在侧栏的“管理资源”部分中执行此操作）。

见工作demo

jQuery - 使用缓动插件调整图像效果

1 个答案: