jquery - 如何动画返回功能

Question

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

在这种情况下，鼠标悬停展开框将其带回...但是动画回调不起作用..我错在哪里？

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

要回答您的问题“我错在哪里”：您刚刚放错了}.

您的代码应该是：

$('.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()。这行得通，当我尝试时。这是唯一的错误。