1

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

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

<div class="page-container">

<h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2>
    <img src="images/waikanae/next button.png" id="gallery-next"/>


    <div id="slider">

      <section class="horizontal-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

      <section class="vertical-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

      <section class="horizontal-gallery">
        <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
        <p class="horizontal-gallery-text">Test text.</p>
      </section>

    </div> 

$('#gallery-next').click(function() {
   $('.horizontal-gallery').hide('slide',{direction:'left'},1000);
});
4

2 に答える 2

0

説明した内容に基づいて、次のものが必要になります。

$('div selector').hide('slide',{direction:'right'},1000);

また:

$('button').click(function() {
   //sliding code
});

参照: http://docs.jquery.com/UI/Effects/Slide および: http://api.jquery.com/click/

于 2013-02-14T02:39:17.947 に答える
0

これはまさにあなたが望むものではないかもしれませんが、役に立つコードのアイデアが見つかることを願っています。うまくいくものを取り上げ、別の質問を投稿してソリューションを微調整してください。javascript とスタイルシートを別々のドキュメントにするのではなく、ページ内に含めたので、少し乱雑に見えます。

hide('slide') メソッドは jQueryUI のものであり、そのライブラリも含める必要があることに注意してください。

残念ながら投稿を削除した別の投稿者の提案に従って、各セクション要素に ID が追加されたことにも注意してください。

これは完全に機能する例です (画像が存在することを確認してください。異なる画像であってもかまいません)。

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script type="text/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 = 'left';
//alert('Next slideType is: ' + slideType)
                //hide(slide) is a jQueryUI function, so ensure you include that lib
               $('#'+slidenum+'-slide').hide('slide',{direction:slideType},500);
               $('#'+slidenext+'-slide').fadeIn(1000);
               slidenum = slidenum % totalslides + 1;
               $('#gallery-next').data('counter',slidenum);
            });
        });
    </script>
    <style type="text/css" >
        .init-hidden {display:none;}
    </style>
</head>
<body>
<div class="page-container">

    <h2 class="gallery-heading"> WAIKANAE BEACH HOUSE </h2>
    <img src="images/waikanae/next button.png" id="gallery-next"/>

    <div id="slider">
        <section id="1-slide" class="horizontal-gallery">
            <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
            <p class="horizontal-gallery-text">Test text.</p>
        </section>

        <section id="2-slide" class="vertical-gallery init-hidden">
            <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-vertical"/>
            <p class="vertical-gallery-text">Test text.</p>
        </section>

        <section id="3-slide" class="horizontal-gallery init-hidden">
            <img src="images/waikanae/crafar_h1.jpg" class="waikanae-gallery-horizontal"/>
            <p class="horizontal-gallery-text">Test-text.</p>
        </section>
    </div> <!-- endDiv slider -->
</div> <!-- endDiv page-container -->
</body>
</html>
于 2013-02-14T19:26:30.450 に答える