1

次/前のボタンがクリックされたときにアニメーション化するスライダーがあります。アニメーションでスライダーが最小 (0px) と最大 (1200px) に達した場合に機能を停止するというアイデアがありました。jquery が追加されたインライン css を検出するにはどうすればよいですか? または、スライダーを「停止」する方法のアイデアはありますか?

私のコード:

$('.next').click(function(){
    $('#portfolio-slider').animate({
        left: "-=400",
    }, 300);       
});

$('.prev').click(function(){
    $('#portfolio-slider').animate({
        left: "+=400",
    }, 300);       
});

JsFiddle: http://jsfiddle.net/tDrqT/3/

ありがとう！

4

6 に答える 6

1

次の方法で位置を確認できます。

$('#portfolio-slider').position().left

ここでフィドル

于 2013-08-15T19:07:16.287 に答える
0

jQuery.css はインライン スタイルを返します。

$('.next').click(function(){
    $('#portfolio-slider').animate({
            left: "-=400",
        }, 300);       

    console.log($('#portfolio-slider').css('left'));
});

$('.prev').click(function(){
    $('#portfolio-slider').animate({
            left: "+=400",
        }, 300);    

    console.log($('#portfolio-slider').css('left'));
});

http://jsfiddle.net/tDrqT/5/

アニメーションを呼び出す前に、スライダーが最後の画像にあるかどうかを確認する簡単なチェックを実装できます。

于 2013-08-15T19:06:11.613 に答える
0

これは、最初と最後の画像で制限付きのスライダーを表示する素晴らしいフィドルです。jQueryposition()関数を使用してスライダーの位置と最後の画像の位置を取得し、その情報を使用してスライダーの動きを制限します。

http://jsfiddle.net/tDrqT/14/

//get the position and width of the last image
var lastPicPos = $('#portfolio-slider').children('img').last().position().left;

function getLeftPos() {
     return - $('#portfolio-slider').position().left;   
}

var onUpdate = function() {
    $('#info').text("0 <= " + getLeftPos() + " <= " + lastPicPos);
};

onUpdate();

$('.next').click(function(){
    if (getLeftPos() < lastPicPos) {
      $('#portfolio-slider').animate({
            left: "-=400",
        }, 300, null, onUpdate);       
    }
});

$('.prev').click(function(){
     if (getLeftPos() > 0) {
      $('#portfolio-slider').animate({
            left: "+=400",
        }, 300, null, onUpdate);
    }
});

また、出力を表示するために使用した html の上部に div を追加する必要があります。

<div id="info"></div>
于 2013-08-15T19:32:30.273 に答える
0

このようなスタイル属性を確認できます

if($('#portfolio-slider').attr('style') === 'left: -800px;')
        return

ここにフィドルがあります

http://jsfiddle.net/tDrqT/7/

于 2013-08-15T19:09:48.210 に答える
0

使用.animate()および使用step:

var min = 0,
    max = 800;
$('.next').click(function(){
    $('#portfolio-slider').animate({
            left: "-=400",
        }, {
            step: function (now, fx) {
                                    console.log(now);
                if(parseInt(now) <= (max*-1)){
                    $(this).stop();
                    fx.end = fx.start;
                }
            }
        }, 300);       
});

$('.prev').click(function(){
    $('#portfolio-slider').animate({
            left: "+=400",
        }, {
            step: function (now, fx) {
                if(parseInt(now) >= min){
                    $(this).stop();
                    fx.end = fx.start;
                }
            }
        }, 300);       
});

デモ: http://jsfiddle.net/dirtyd77/AfBkg/

于 2013-08-15T19:10:19.100 に答える
0

直接位置を確認します。左側で 0 を探し、右側で -800 を探します。エッジを通過しない場合にのみ、アニメーションを実行してください。

$('.next').click(function(){
    if ($('#portfolio-slider').position().left === -800) {
        return;
    }

    $('#portfolio-slider').animate({
            left: "-=400",
        }, 300);       
});

$('.prev').click(function(){
    if ($('#portfolio-slider').position().left === -0) {
        return;
    }
    $('#portfolio-slider').animate({
            left: "+=400",
        }, 300);       
});

フィドル - http://jsfiddle.net/uFMfa/1/

于 2013-08-15T19:10:26.003 に答える