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/

您可以在调用 animate 之前执行一个简单的检查，以查看滑块是否位于最后一张图像。

于 2013-08-15T19:06:11.613 回答
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 回答
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 回答