Javascript 通过触摸事件调整iPad悬停动画

这是我第一次尝试开发触摸事件。我有一个鼠标悬停的滑块，前两张幻灯片有链接，点击后会显示隐藏的内容。试图找出一种方法来调整它，使内容在滑动而不是悬停时动画化，并且仍然保持幻灯片中链接的“点击”状态。我使用的网站有jQuery1.3.2，没有升级的希望，所以我希望找到一些可以与旧库一起使用的东西

您可以看到滑块正在运行。我还把它放在小提琴上：

最终，我试图实现的是当用户滑动手指时移动幻灯片（如果iPad上的背景是静止的，那么也可以），如果他们抬起手指，动画就会停止，就像用鼠标悬停开始和停止一样。我创建了一个if/else语句，所以它仍然可以在hover上工作。动画在iPad上不起作用，但箭头不显示，所以我认为if语句是正确的

jQuery：

            $(document).ready(function() {
        var timer;

        if(!!('ontouchstart' in window)){
            $("#nextarrow, #backarrow").hide();
            $(".mid").bind('touchstart', function(){
                timer = setInterval(function() {swipeLeft();}, 50);
            }, function() {
                clearInterval(timer);
            });

            function swipeLeft() {
                                if(($(".mid").position().left) >= -1880){
                                $("#background").stop().animate({
                                    'left': '-=2px'
                                }, 50);
                                $(".mid").stop().animate({
                                    'left': '-=20px'
                                }, 50);
                                }
                            }
        }

        else{
        $("#nextarrow").hover(function() {
                timer = setInterval(function() {slideLeft();}, 50);
            }, function() {
                clearInterval(timer);
            });


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



        function slideLeft() {
            if(($(".mid").position().left) >= -1880){
            $("#background").stop().animate({
                'left': '-=2px'
            }, 50);
            $(".mid").stop().animate({
                'left': '-=20px'
            }, 50);
            }
        }

        function slideRight() {
            if(($(".mid").position().left) <= -10){
            $("#background").stop().animate({
                'left': '+=2px'
            }, 50);
            $(".mid").stop().animate({
                'left': '+=20px'
            }, 50);
            }
        }

        }


        $("#shop-slide1").click(function() {
        $("#shop-slide1-contents").animate({'bottom': '-0px'}, 1000);
        $(".close").click(function() {
        $("#shop-slide1-contents").animate({'bottom': '-525px'}, 1000);
        });
        });

        $("#shop-slide2").click(function() {
        $("#shop-slide2-contents").fadeIn('slow');
        $(".close").click(function() {
        $("#shop-slide2-contents").fadeOut('fast');
        });
        });

        });

            <div id="mask">
            <div id="nextarrow"></div>
            <div id="backarrow"></div>
            <div id="background"></div>
            <div class="mid">                   
                                 <div id="slide1" class="slide">
                                    <p id="shop-slide1" class="shop-link">+ Shop The Collection</p>
                                 </div>
                                 <div id="slide2" class="slide">
                                    <p id="shop-slide2" class="shop-link" style="color: #fff; font-weight: bold;">+ I need this</p>
                                 </div>
                                 <div id="slide3" class="slide"></div>
                                 <div id="slide4" class="slide"></div>
                                 <div id="slide5" class="slide"></div>


            </div>
            </div>

$（文档）.ready（函数（）{
无功定时器；
如果（！！（“窗口中的ontouchstart”）{
$（“#nextarrow，#backarrow”）.hide（）；
$（“.mid”）.bind（'touchstart'，function（）{
计时器=设置间隔（函数（）{swipleft（）；}，50）；
}，函数（）{
清除间隔（计时器）；
});
函数swipleft（）{
如果（$（“.mid”）.position（）.left）>=-1880）{
$（“#背景”）.stop（）.animate({
“左”：“-=2px”
}, 50);
$（“.mid”）.stop（）.animate({
“左”：“-=20px”
}, 50);
}
}
}
否则{
$（“#nextarrow”）.hover（函数（）{
计时器=设置间隔（函数（）{slideLeft（）；}，50）；
}，函数（）{
清除间隔（计时器）；
});
$（“#反箭头”）.hover（函数（）{
计时器=设置间隔（函数（）{slideRight（）；}，50）；
}，函数（）{
清除间隔（计时器）；
});
函数slideLeft（）{
如果（$（“.mid”）.position（）.left）>=-1880）{
$（“#背景”）.stop（）.animate({
“左”：“-=2px”
}, 50);
$（“.mid”）.stop（）.animate({
“左”：“-=20px”
}, 50);
}
}
函数slideRight（）{
如果（$（“.mid”）.position（）.left）您是否考虑过使用外部库进行多点触控事件？Hammer.js非常易于使用，听起来它可以帮助您实现您想要的功能…我希望在不加载其他库的情况下找到一些解决方案，但如果我能找到一个适用于1.3.2的库，我会接受它。我会看看Hammer。谢谢。