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

根据this question分隔x和y值。

Answer 2

此：

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

无效！

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

修改

这个答案实际上是背景动画问题的解决方案，即跨浏览器：

<强> JQuery Animate Background Image on Y-axis

jQuery动画变化

2 个答案: