0 
  //NEXT
  $('.social-next a').on('click', function(e){
    e.preventDefault();
    $('.social').animate({'margin-left': '-=940'}, 500);
  });


  //PREVIOUS
  $('.social-previous a').on('click', function(e){
    e.preventDefault();
     $('.social').animate({'margin-left': '+=940'}, 500);
  });

このコードを使用すると、すべてのコンテンツからどこにでもスライドできます。ボタンを消すことができず、奇妙なエラーが発生し始めました。最初と最後を使ってボタンを隠してみましたが、どこが間違っていたのかわからず、恥ずかしいので言及することさえできない別の方法を試し始めました...単純な1-2ライナーであることはわかっていますが...

HTML:

    <div class="social">
        <div class="slide">
        <div class="intro">xxx.</div><!-- <a href="#" class="show-slides">view more..</a> -->
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
            <div class="content">dolor dolor dolor </div><a href="#" class="close-slides"></a>
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.</div><a href="#" class="open-slides">
            <div class="content">ipsum ipsum ipsum ipsum ipsum</div><a href="#" class="close-slides"></a>
        </div>

        <div class="slide">
            <div class="intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima error.<a href="#" class="open-slides"></div>
            <div class="content"><div class="tekst">Lorem Lorem Lorem Lorem Lorem</div></div><a href="#" class="close-slides"></a>
        </div>

    </div>
4

1 に答える 1

0

そのコードには、最初または最後の位置を示すものは何もありません。適用されているのは余分なマージンだけなので、位置を確認する唯一の方法はマージンからです。

たとえば、最初のスライドで margin-left が 0 になるとします。それを確認して前のボタンを非表示にできます。最後のスライドでは余白が 2820px になるため、それを確認して次のボタンを非表示にできます。

これは厄介な方法ですが、マークアップを変更しなければ、このコードで利用できるのはそれだけです。

編集 - animate のコールバック関数を使用するようにコードを変更しました。また、既に実行されているアニメーションを開始できないようにするフィルターも使用しました。デモを更新しましたので、お試しください

var increment = -94;
$('.social-next a').on('click', function(e) {
    e.preventDefault();
    $('.social').filter(':not(:animated)').animate({
        'margin-left': '+=' + increment
    }, 500, function() {
        checkButtons($('.social').css("margin-left"))
    });
});

$('.social-previous a').on('click', function(e) {
    e.preventDefault();
    intMar = +$('.social').css("margin-left").replace("px", "");
    $('.social').filter(':not(:animated)').animate({
        'margin-left': '-=' + increment
    }, 500, function() {
        checkButtons($('.social').css("margin-left"))
    });
});

function checkButtons(margin) {
    intMar = +margin.replace("px", "");
    var children = $('.social').children('.slide').length;
    var limit = increment * (children - 1);
    switch (intMar) {
    case 0:
        $('.social-previous').hide();
        break;
    case limit:
        $('.social-next').hide();
        break;
    default:
        $('.social-previous').show();
        $('.social-next').show();
        break;
    }
}​
于 2012-11-08T09:22:31.823 に答える