jquery - jQuery 动画更改

Question

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

$('#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);
                });

Answer 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 定义进行了字符串化，有时它们不能正常工作，所以我总是使用字符串以防万一。

根据这个问题分离 x 和 y 值。

Answer 2

这个：

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

是无效的！

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

编辑：

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

Y 轴上的 JQuery 动画背景图像