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

How to detect inline css style with jquery (to stop slider)?

本文关键字：样式 css jquery 何使用 检测      更新时间：2023-09-26

我有一个滑块，当单击下一个/上一个按钮时，它会产生动画。我有一个想法，如果滑块达到动画中的最小值（0px）和最大值（1200px），就停止该函数。如何检测jquery添加的内联css？或者有什么关于如何"停止"滑块的想法吗？

我的代码：

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

Js报价：http://jsfiddle.net/tDrqT/3/

谢谢！

您可以使用检查位置

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

这里的小提琴

这里有一个很好的小提琴，它在第一个和最后一个图像上显示了滑块的限制。它使用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将返回内联样式。 
$('.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之前，可以实现一个简单的检查，查看滑块是否位于最后一个图像。

您可以检查类似的样式属性

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

这是一把小提琴

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

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

我会直接检查位置。只要在左边找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/

相关文章：