0

サイトのスライドショーとしてサイクル jquery を使用しています。これは私のhtmlコードです。

 <div class="slideshow_item">
    <div class="image"><a href="#"><img src="#"/></a></div>
    <div class="data">
    <h4><a href="#">title1</h4>
    <p>content</p>
    </div>
    </div>

以下は私のjavascriptコードです

<script>
$(function() {

// ---------------------------------------------------
// Slideshow 1

    $('#slideshow_1').cycle({
        fx: 'scrollHorz',       
        easing: 'easeInOutCirc',
        speed:  700,    
        timeout: 5000, 
        pager: '.ss1_wrapper .slideshow_paging', 
        prev: '.ss1_wrapper .slideshow_prev',
        next: '.ss1_wrapper .slideshow_next',
        before: function(currSlideElement, nextSlideElement) {
            var data = $('.data', $(nextSlideElement)).html();
            $('.ss1_wrapper .slideshow_box .data').fadeOut(1200, function(){
                $('.ss1_wrapper .slideshow_box .data').remove();
                $('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').fadeIn(1200);
            });
        }
    });

    // not using the 'pause' option. instead make the slideshow pause when the mouse is over the whole wrapper
    $('.ss1_wrapper').mouseenter(function(){
        $('#slideshow_1').cycle('pause');
    }).mouseleave(function(){
        $('#slideshow_1').cycle('resume');
    });

// ---------------------------------------------------

    $('a[href="#"]').click(function(event){ 
        event.preventDefault(); // for this demo disable all links that point to "#"
    });

});
</script>

.data の下の html コードには、h4 タグと p タグがあります。スライダーは、水平方向のスライドと、.data の絶対位置のためにスライダーに流れるキャプション (.data) でうまく機能し、正常に機能します。さて、私の質問は、フェードインとフェードアウトの場合に上記の JavaScript を変更して、キャプション (.data) を上から下、または左側から右側に動的にバウンスする方法です。私を助けてください。

4

1 に答える 1

0

バウンス効果は jquery ui に付属しているため、このライブラリをページに含めることを忘れないでください。
effect() メソッドを呼び出して、必要な結果を得ることができると思います。「バウンス」効果には 4 つのオプションを設定できます。

方向: 効果の方向。「上」、「下」、「左」、「右」のいずれかです。デフォルトは「上」です。
Distance : 跳ねる距離。デフォルトは 20です。
Mode : 効果のモード。「表示」、「非表示」、または「効果」のいずれかです。デフォルトは「効果」です。
Times : バウンスする回数。デフォルトは 5 です。

どの方向、距離、時間を選択するかはあなた次第ですが、ここで最も重要なのはモードです。要素を非表示にするfadeOutの代わりにモードを「hide」に設定し、要素を表示するfadeInの代わりにモードを「show」に設定します。

メソッドは次のようになります。

.effect("bounce", {mode: "hide", times: 4, direction: "up"}, 1200, function(){});

ご覧のとおり、まず「バウンス」効果を選択し、次に使用可能なオプションのいくつかを含む配列に移動し、次に持続時間 (この場合は 1200 または 1.2 秒) に移動し、最後の効果は効果の後に実行される関数です。終了します。

「表示」モードと「非表示」モードでバウンスがどのように機能するかの簡単な jFiddle の例を次に示します: http://jsfiddle.net/Z73P5/2/

したがって、これを使用してサイクルプラグインの「前」パラメータを変更してみてください。それがうまくいくことを願っています。

before: function(currSlideElement, nextSlideElement) {

        var data = $('.data', $(nextSlideElement)).html();

        $('.ss1_wrapper .slideshow_box .data').effect("bounce", {times: 4, direction: "up", mode: "hide"}, 1200, function(){
            $('.ss1_wrapper .slideshow_box .data').remove();
            $('<div class="data">'+data+'</div>').hide().appendTo('.ss1_wrapper .slideshow_box').effect("bounce", {times: 4, direction: "down", mode: "show"}, 1200);
        });

    }
于 2013-08-19T15:54:53.240 に答える