Question

$('.box').hover(function () {
    $(this).stop().animate({
        width: '200px',
        height: '200px',
        top: '-70px'
    }, 500),
    function () {
        $(this).stop().animate({
            width: '30px',
            height: '30px',
            top: '0'
        });
    };
});

在这种情况下作为悬停展开框，因为mouseout将其恢复...但动画回叫无法正常工作......我错了吗？

Answer 1

我想你想要这样，只需改变它的操作。

的js

 $('.box').hover(
  function () {
    $(this).stop().animate({
        width: '200px',
        height: '200px',
        top: '-70px'
    }, 500);
    },

    function () {
        $(this).stop().animate({
            width: '30px',
            height: '30px',
            top: '0'
        });
 });

小提琴Here

Answer 2

尝试

$('.box').hover(        
    function () {
    $(this).stop().animate({
        width: '200px',
        height: '200px',
        top: '-70px'
    }, 500);
    },

    function () {
        $(this).stop().animate({
            width: '30px',
            height: '30px',
            top: '0'
        });
});

小提琴http://jsfiddle.net/code_snips/8pDqt/

Answer 3

尝试

$('.box').hover(function () {
    $(this).stop().animate({
        width: '200px',
        height: '200px',
        top: '-70px',
        done: function () { //A function to be called when the animation completes
            $(this).stop().animate({
                width: '30px',
                height: '30px',
                top: '0'
            });
        };
    }, 500);
});

阅读.animate()

Answer 4

回答你的问题＆＃34; 我错在哪里＆＃34;：你刚刚错位了}。

您的代码应为：

$('.box').hover(
    function () {
        $(this).stop().animate({
            width: '200px',
            height: '200px',
            top: '-70px'
        }, 500);
    },
    function () {
        $(this).stop().animate({
            width: '30px',
            height: '30px',
            top: '0'
        });
    }
);

您试图将一个函数包含在另一个函数中。这不是hover语法的方式。 enter和leave的两个函数必须用逗号分隔，不能重叠。

在第二行}开始前，您上一行的function()会向上移动。这是有效的，当我尝试它。这是唯一的错误。

如何动画回功能

4 个答案: