0

これは、タッチ イベントを使用して何かを開発する最初の試みです。ホバーするとアニメーションが表示されるスライダーがあり、最初の 2 つのスライドには、クリックすると非表示のコンテンツが表示されるリンクがあります。ホバーではなくスワイプでコンテンツがアニメーション化され、スライド内のリンクの「クリック時」を維持するように適応させる方法を見つけようとしています。私が使用しているサイトには、アップグレードの見込みがない jQuery 1.3.2 があるため、その古いライブラリで動作するものを見つけたいと思っています。

ここで進行中のスライダーを見ることができます。私はそれをフィドルにも入れました：http://jsfiddle.net/uqY8E/

最終的に、私が達成しようとしているのは、ユーザーが指をスワイプしたときにスライドを移動することです (iPad で背景が静的であれば問題ありません)。ユーザーが指を離すと、アニメーションが開始して停止するのと同じように停止しますホバー。これを読んで if/else ステートメントを作成したので、ホバーでも機能します。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');
        });
        });

        });

HTML :

            <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>

iPad 専用に swipeLeft 機能を変更する必要がありますか? ホバーイベントからコピーしました。これを機能させるための助け、またはこれを iPad に適応させる別の方法の提案は大歓迎です。私はこれが初めてなので、学ぶことがたくさんあります！

4

0 に答える 0