0

誰かがjqueryループまたはスクリプトを手伝ってくれるかどうか疑問に思っています. ボタンをクリックすると、div をアニメーション化して画面上をスライドさせたいと思います。もう一度クリックすると、別の div が下にスライドします。ボタンがもう一度クリックされると、別の div などが続きます。

これまでに行った html マークアップは次のとおりです。

     <section id="1-text" class="horizontal-gallery-text">
        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p>
    </section>


    <section id="2-text" class="vertical-gallery-text init-hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p>
    </section>


    <section id="3-text" class="horizontal-gallery-text init-hidden">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa est, accumsan sed eleifend et, pulvinar sed lacus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam placerat enim et metus porta eu elementum augue ultricies. Fusce bibendum augue interdum neque fringilla at v</p> 
    </section>

およびJavaScript：

var totalslides = '3';
        var slidenum = 0;
        var slidenext = 0;
        var slideType = '';
        $(function(){
            $('#gallery-next').data('counter',1);
            $('#gallery-next').click(function() {
               slidenum = parseInt($('#gallery-next').data('counter'));
               slidenext = slidenum+1
               slideType = $('#'+slidenum+'-slide').attr('class')
               slideType = slideType.split('-')[0]
               if (slideType=='horizontal') slideType='up';
               else slideType = 'right';
                //alert('Next slideType is: ' + slideType)
                //hide(slide) is a jQueryUI function, so ensure you include that lib
               $('#'+slidenext+'-slide').delay(500).delay(500).show('slide',{direction:slideType}, 1000);
               $('#'+slidenum+'-slide').delay(100).fadeOut(100);
               slidenum = slidenum % totalslides + 1;
               $('#gallery-next').data('counter',slidenum);
            });
        });

これまでのところ、いくつかのスライドをスライドさせていますが、いくつかは動かなくなっています。誰かが問題を確認したり、より良い解決策を考えたりできるかどうか疑問に思っていました

4

1 に答える 1

0

何が問題なのかわかりませんが、これを行う別の方法があります。

div 1 を右にスライドさせ、次に div 2 を下にスライドさせ、次に div 3 を右にスライドさせたいと想定しています。

jqueryではなく、この種のcss3トランジションを使用します（jqueryは好きではありません）。次の html コードが必要です。

<!DOCTYPE html>
<html>
<head>
    <style>
        section{
            position:relative;
            transition: all 0.1s;
        }
    </style>
    <script type="text/javascript">
        var slidenum=0;
        window.onload=function(){
            var button=document.getElementById('gallery-next');
            button.onclick=function(){
                var curslide=document.getElementById(slidenum+'-slide');
                switch(slidenum++){
                    //replace the 700px with the value you want
                    case 1:curslide.style.top='700px';break;
                    case 2:
                    case 0:curslide.style.left='700px';break;
                }
                if(slidenum===3) button.addEventListener('click',function(){alert('we\'re already done')},false);
            }
        }
    </script>
</head>
<body>
    <!--<sections> here-->
</body>
</html>

これはテストされていません

于 2013-02-21T23:38:23.177 に答える