Question

我有一个滑块，当下一个/上一个按钮被点击时动画是什么。我有一个想法，如果滑块达到动画中的最小值（0px）和最大值（1200px），则停止该功能。如何检测添加内联css的jquery？或任何关于如何＆＃34;停止＆＃34;滑块？

我的代码：

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

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

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

谢谢！

Answer 1

您可以通过以下方式查看位置：

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

Here小提琴

Answer 2

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/

您可以在调用动画之前实现一个简单的检查以查看滑块是否位于最后一个图像。

Answer 3

您可以像这样检查样式属性

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

这是一个小提琴

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

Answer 4

使用.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/

Answer 5

我会直接检查这个位置。只需在左侧查找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/

Answer 6

这是一个很好的小提琴，可以在第一张和最后一张图像上显示滑块的限制。它使用jQUery position()函数来获取滑块的位置以及最后一个图像的位置，并使用该信息来限制滑块的移动。

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>

如何使用jquery检测内联css样式（停止滑块）？

6 个答案: