jQuery动画不工作

Question

我需要创建一些像jQuery滑块一样的东西，有几个点，不同的点之间的距离。

​

​

<div class="wrapper">
  <div class="point point-1"></div>
  <div class="point point-2"></div>
  <div class="point point-3"></div>
  <div class="point point-4"></div>

  <div class="toddler"></div>  
</div>

CSS

.wrapper {
margin-top: 10px;
margin-bottom: 10px;
position: relative;
width: 500px;
height: 1px;
background: #000;
}
.point {
    position: absolute;
    top: -2px;
    width: 5px;
    height: 5px;
    background: red;
}
.point-1 {
    left: 0;
}
.point-2 {
    left: 100px;
}
.point-3 {
    left: 250px;
}
.point-4 {
    right: 0px;
}

.toddler {
    position: absolute;
    top: -6px;
    left: 40px;
    width: 13px;
    height: 13px;
    background: blue;
    cursor:  pointer;
}

jQuery

$.fn.slider = function () {
var startPoint = $(this).offset().left;
var endPoint = startPoint + $(this).width();

/*console.log(startPoint);
console.log(endPoint);*/

var points = $(this).find(".point");
var len = points.length;
/*console.log(len);*/

var pointsCoordsX = [];
var i = 0;

for (i = 0; i != len; i++) {
    var coord = points.eq(i).offset().left;
    /*console.log(coord);*/
    pointsCoordsX.push(coord);
}

var toddler = $(this).find(".toddler");
toddler.bind('mousedown', function (e) {
    var toddlerW = toddler.width();
    var toddlerH = toddler.height();
    var toddlerX = toddler.offset().left;
    /*console.log(toddlerX);*/

    $(this).bind('mousemove', function (e) {
        var x = (e.pageX - toddlerX - (toddlerW / 2)) * (toddlerW > toddlerH ? (toddlerH / toddlerW) : 1);
        /*console.log(x);*/
        var PrevPointX;
        var NextPointX;
        for (i = 0; i != len - 1; i++) {
            if (toddlerX >= pointsCoordsX[i] && toddlerX <= pointsCoordsX[i + 1]) {
                PrevPointX = pointsCoordsX[i];
                NextPointX = pointsCoordsX[i + 1];
            }
        }
        /*console.log(PrevPointX);
        console.log(NextPointX);*/
        if (x > 0) {
            var diffX1 = NextPointX - toddlerX;
            /*console.log(diffX);*/
            $(this).animate({'right': + '+=' + diffX1});
        }
        else {
            var diffX2 = toddlerX - PrevPointX;
            /*console.log(diffX);*/
            $(this).animate({'left': + '+=' + diffX2});
        }
    });
});
};


$(".wrapper").slider();

Fiddle http://jsfiddle.net/vvxnb0u9/60/

我不明白为什么我的动画在这里不起作用？

Answer 1

我觉得这是个有趣的问题，所以我试了一试。我不知道你想要实现什么，所以我采取了一些自由(很多，实际上)。但是，如果你明白我做了什么，你可能会重新安排它，这样它就能做你想做的事情。

我的主要自由是允许用户点击靠近酒吧的任何地方，而不必强迫拖动滑块(这仍然是允许的)。看着你原来的小提琴，我相信你可以轻松地解开它。

然后，我删除了一些代码，这些代码正在处理要到达的下一个/上一个点。这部分是纯粹的算法，所以你也可以用你自己的代码撤销它。

我将您的代码替换为：

// the "clickable" area surronds the bar
$(".clickable").bind('mousedown', function (e) {
    toddlerW = toddler.width();
    toddlerH = toddler.height();
    toddlerX = toddler.offset().left;
});

$(".clickable").bind('mouseup', function (e) {

    // the distance to add / remove is the distance between
    // the current mouse position and the old toddler position
    // (draw it on paper if needed)
    var x = e.pageX - toddlerX - toddlerW / 2;

    // save the new toddler position
    toddlerX = e.pageX;

    // let's ride !
    toddler.animate({'left': '+=' + x}, "slow");

});

告诉我这是不是离你需要的太远了。

如果你想让蹒跚学步的孩子在酒吧的任何地方：http://jsfiddle.net/9r8qh4cu/

如果你想让蹒跚学步的孩子在正确的位置上：http://jsfiddle.net/aogohya8/

一个更通用的示例(增强了滑块功能)：http://jsfiddle.net/df2gjvh9/