用一个动作对两个元素进行动画处理

Question

我正在尝试创建一种视差效果，其中图像在背景上滑动，背景也会移动，但只是非常轻微。jQuery可以做到这一点吗？ 我尝试通过动画的ID引用这两个元素，但这不起作用。

            $(document).ready(function() {
                var timer;
                $("#leftarrow").hover(function() {
                    timer = setInterval(function() {slideLeft();}, 50);
                }, function() {
                    clearInterval(timer);
                });

            $("#rightarrow").hover(function() {
                    timer = setInterval(function() {slideRight();}, 50);
                }, function() {
                    clearInterval(timer);
                });

            function slideLeft() {
                $("img#background").stop().animate({
                    'left': '-=200px'
                }, 50);
                $(".mid").stop().animate({
                    'left': '-=20px'
                }, 50);
            }
            function slideRight() {
                $("img#background").stop().animate({
                    'left': '-=200px'
                }, 50);
                $(".mid").stop().animate({
                    'left': '+=20px'
                }, 50);
            }

            });

这是一个小提琴：http://jsfiddle.net/rYYDv/

谢谢你的帮助。

Answer 1

不要使用 img 标签作为背景，而是在div 内设置图像，并相应地调整div。

这是我的实现 - jsfiddle