0

私はjQueryBackgroundPositionプラグインとjQueryCycleプラグインを使用して、スライドがスクロールしているときにスライダーと背景画像をアニメーション化しようとしています。これが私がこれまでに持っているもののサンプルです：

HTML

<div class="container">
    <div class="slider">
        <div class="pane">
            Text asd dddsa sadsad
        </div>
        <div class="pane">
            Text asd dddsa sadsad
        </div> 
        <div class="pane">
            Text asd dddsa sadsad
        </div>        
    </div>
    <a href="#" id="prev-slide">&lt; Prev</a>
    <a href="#" id="next-slide">Next &gt;</a>
</div>​

JS

$(function() {
    // Animate background when clicking slider arrows
    $('#prev-slide').on('click', function(event) {
        event.preventDefault();
        slideBgForward();
    });

    $('#next-slide').on('click', function(event) {
        event.preventDefault();
        slideBgBackward();
    });

    $('.slider').cycle({
        fx   : 'scrollHorz',
        next : '#next-slide',
        prev : '#prev-slide',
        before : function(currSlideElement, nextSlideElement, options, forwardFlag) {
            if (forwardFlag) {
                slideBgBackward();
            } else {
                slideBgForward();
            }                
        }            
    });

    // Slide background forwards
    function slideBgForward() {
        $('.container').animate({
            backgroundPosition: '-=20% 0'
        }, 1500);
    }

    // Slide background backwards
    function slideBgBackward() {
        $('.container').animate({
            backgroundPosition: '-=20% 0'
        }, 1500);
    }
});​

http://jsfiddle.net/vengiss/gshtZ/

スライダーのスクロールをそのままにしておくと、意図したとおりに機能しますが、次/前のリンクをクリックしてスライドを移動すると、背景が2回アニメーション化されます。これは、リンクがクリックされたときにスライド関数が呼び出されているためです。スライドがスクロールを開始します。一度だけスクロールする方法はありますか？

前もって感謝します。

4

1 に答える 1

2

あなたの問題は、あなたがと('.slider').cycle()を処理するように要求したことでnextありprev、jQueryにもそれらを処理するように要求していることだと思います-そしてそれぞれがあなたが要求したことを実行しているので、あなたのバックグラウンドは2回アニメーション化されています。

$('#next-slide').on('click')削除/無効化してみ$('#prev-slide').on('click')て、何が起こるか見てみたいと思います。

于 2012-11-06T19:41:35.147 に答える