2

div を水平方向にスライドさせる次の jquery があります。

$('.nextcol').click(function() {
    $('.innerslide').animate({'left': '-=711px'}, 1000);
});

$('.prevcol').click(function() {
    $('.innerslide').animate({'left': '+=711px'}, 1000);
});

私がしたいのはこれです... div.innerslideの位置が左: 0pxの場合、 div.backarrowを非表示にします。位置がleft: 0pxでない場合は、それが表示されます。

どんな助けでも大歓迎です。

編集 (HTML マークアップを追加)

<div class="backarrow prevcol">

<div id="mainleft" class="overflowhidden">
        <div class="innerslide">
            <div class="col">my content including <a href="#" class="nextcol">next</a></div>
            <div class="col">my content including <a href="#" class="nextcol">next</a></div>
            <div class="col">my content including <a href="#" class="nextcol">next</a></div>
        </div>
 </div>
4

2 に答える 2

2

これを試して：

if ($('.innerslide').css("left") == 0) {
   $('div.backarrow').hide(); 
} else {
   $('div.backarrow').show();
}


ダブルクリックの問題の修正: 訪問者がダブルクリックしたときの問題についてのコメントで説明したことから、ダブルクリックによって 2 つのアニメーション イベントが発生しているように聞こえます。これが起こらないようにするには、アニメーションの実行中にクリック ハンドラーを無効にし、終了したら再度有効にするか、要素の位置を継続的にチェックする新しいスレッドを作成してみてください。これらの解決策の 1 つは良い考えではありません - 私はあなたにどちらを理解させます :) - しかし、もう 1 つは実際には非常に単純な解決策であり、既存のコードをほとんど変更する必要はありません (実際には、オーバーヘッドをわずかに削減する可能性があります)。額）：

$('.nextcol').on("click.next", function() {
    $('.innerslide').animate({'left': '-=711px'}, 1000, showHideBack());
    $(this).off("click.next");
});

$('.prevcol').on("click.prev", function() {
    $('.innerslide').animate({'left': '+=711px'}, 1000, showHideForward());
    $(this).off("click.prev");
});

次に、この行を次の行に追加します(それを使用している場合は、これshowHideBack()を補完する行を追加します):showHideForward()

$('.nextcol').on("click.next".....

各クリック ハンドラーを設定する関数と、それぞれを削除する別の関数を作成することをお勧めします。これにより、ライブが非常に簡単になり、アニメーションの実行中に不要なクリック ハンドラーが削除されるため、ソリューション全体でオーバーヘッドが削減されます。

注:animationメソッドは、アニメーションが終了する前にコールバックを呼び出すことがよくあります。delayそのため、メソッドを呼び出す前にa を使用したい場合がありますshowHide...。


ご不明な点がございましたら、お知らせください。幸運を！:)


アップデート：

これは、すべてのバグが解決された、あなたが私にくれたフィドルの更新版です。元のソリューションであなたの目標の一部を誤解していたようですが、ここで修正しました。更新された jQuery もここに含めました。

var speed = 1000;
var back = $("div.backarrow");
var next = $(".nextcol");
var prev = $(".prevcol");
var inner = $(".innerslide");

function clickNext(index) {
    next.off("click.next");
    inner.animate({
        'left': '-=711px'
    }, speed, function() {
        back.show(); //this line will only be hit if there is a previous column to show
            next.delay(speed).on("click.next", function() {
                clickNext();
            });
    });
}

function clickPrev() {
    prev.off("click.prev");
    inner.animate({
        'left': '+=711px'
    }, speed, function() {
        if (inner.css("left") == "0px") {
            back.delay(speed).hide();
            prev.delay(speed).on("click.prev", function() {
                clickPrev();
            });
        } else {
            back.delay(speed).show();
            prev.delay(speed).on("click.prev", function() {
                clickPrev();
            });
        }
    });
}

next.on("click.next", function() {
    clickNext();
});

prev.on("click.prev", function() {
    clickPrev();
});​


前回のコラムを見ているかどうかをチェックする条件も入れようと思ったのですが、最終的な実装がどうなるか分からないので、適用できるかどうかわかりませんでした。いつものように、これについて助けが必要な場合や説明が必要な場合はお知らせください。:)

于 2012-10-23T14:43:09.977 に答える
0

オプションを試すことができstepます — アニメーションの各ステップで起動されるコールバック関数:

$('.prevcol').click(function() {
    $('.innerslide').animate({ left: '+=711px' },
           {
               duration: 1000,
               step: function(now, fx) {
                      if (now === 0 ) {
                           $('div.backarrow').hide(); 
                      } else {
                           $('div.backarrow').show();
                      }
              }
    });
});

この記事のその他の使用例 jQuery animate() ステップ コールバック関数

于 2012-10-23T14:54:36.973 に答える