javascript - 如何防止图像动画穿过我的整个屏幕而不仅仅是我的容器？

Question

我目前有一个脚本函数，它获取图像并创建动画，允许它从屏幕的一侧传递到另一侧。但是我只想让动画穿过我的容器，它明显小于屏幕尺寸。我如何更改代码以允许它执行此操作？

功能:

 <script>
        $(function() {
            var img = $("#bus"),
                    width = img.get(0).width,
                    screenWidth = $(window).width(),
                    duration = 10000;

            function animateBus() {
                img.css("left", -width)
                        .animate({
                            "left": screenWidth
                        }, duration, animateBus);
            }

            animateBus();
        });

    </script>

这也是我的容器:

div.container {
            text-align: left;
            width: 710px;
            margin: 0 auto;
            border: 12px solid black;
            border-radius: 10px;
        }

Answer 1

将 screenWidth = $(window).width(), 更改为 screenWidth = $("div.container").width(),