jQuery 动画更改答案

【问题标题】：jQuery animate changejQuery 动画更改
【发布时间】：2013-03-04 22:48:56
【问题描述】：

有人看到这里有问题吗？它不工作。

$('#div1').hover(
                function () {                       
                    $('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);                       
                    $('#div3').stop().animate({ marginRight : '-=10px;' }, 500);
                },
                function () {                   
                    $('#div2').stop().animate({ backgroundPosition : '(0 0)'}, 500);                        
                    $('#div3').stop().animate({ marginRight : '+=10px;'}, 500);
                });

【问题讨论】：

不能为背景位置设置动画，一次只能设置一个值。
你能用小提琴重现这个错误吗？
我在这里输入错误，这不是主要问题:)
是的，jsfiddle.net/exEqP
你需要加载jQuery。

标签： jquery

【解决方案1】：

JSFiddle

您在右边距宽度中有分号，在背景位置有括号。

另外，你没有在小提琴中加载 jQuery。

$('#div1').hover(
    function () {                       
        $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '-60px' }, 500);                        
        $('#div3').stop().animate({ 'margin-right' : '-=10px' }, 500);
     },
    function () {
        $('#div2').stop().animate({ 'background-position-x' : '0px', 'background-position-y': '0px'}, 500);                        
        $('#div3').stop().animate({ 'margin-right' : '+=10px'}, 500);
});

我还对 css 定义进行了字符串化，有时它们不能正常工作，所以我总是使用字符串以防万一。

按照this question 分隔 x 和 y 值。

【讨论】：

已更改，但没有帮助:(

【解决方案2】：

这个：

$('#div2').stop().animate({ backgroundPosition : '(0 -60px)' }, 500);

无效！

jQuery 不理解'(0 -60px)'，所以什么也没有发生，而且无论如何你不能为这两个值设置动画，因为 animate 一次只接受一个值，如果我没记错的话，那将是 X 轴，而不是 Y轴。为此，您需要使用 step() 方法：

编辑：

这个答案中其实有一个解决背景动画问题的方法，那就是跨浏览器：

JQuery Animate Background Image on Y-axis

【讨论】：

好的，但即使我从代码中排除背景位置更改，边距更改也不起作用:(
那是因为您在尝试设置动画的值之后包含了一个分号。试试这个$('#div3').stop().animate({ marginRight: '+=10px' }, 500);
@fandrejevic - 不客气！我还为背景动画添加了一个解决方案。