jquery - 如何在 jQuery 中添加第二个动画？

Question

我正在尝试实现图像缩放效果（因为它位于溢出的容器中：隐藏，增加它的宽度并向左滑动应该可以解决问题）。

我设法让它增加它的宽度：

/* Zoom in images */
$('img.vectimg').load(function() {
    $(this).data('width', this.width);
}).bind('mouseenter mouseleave', function(e) {
    $(this).stop().animate({
        width: $(this).data('width') * (e.type === 'mouseenter' ?  1.2 : 1)
    });
});

但是如何添加动画以将其向左移动？我尝试附加这个 / 但它没有奏效。

$(this).stop().animate({
            left: $(this).position().left  + 500
        });

我是一个完整的新手，所以请不要让我难过:)

Answer 1

您可以在同一个animate()调用中添加多个属性。

$(this).stop().animate({
    width: $(this).data('width') * (e.type === 'mouseenter' ?  1.2 : 1),
    left: $(this).position().left + (e.type === 'mouseenter' ? 500 : -500)
});

阅读更多：http ://api.jquery.com/animate/

Answer 2

下一个动画使用 jQueryanimate()回调函数。

在此处查看文档。

注意：您必须将元素设置position为relative（在 CSS 中）才能操作左、右属性等。