javascript - jquery - 用一个动作动画两个元素

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