jQuery - 如何在鼠标移动时间轴时运行 .animate？

Question

我希望 div 在鼠标在时间轴上移动时运行此动画。 div 以width/height 100px 开头，当鼠标接近时间线的一半时，div 同时调整为width/height 200px。当鼠标接近时间线的末尾时返回到 div width/height 100px。

$('#timeline').mousemove(function(e){
    var position = e.clientX;
    $('#mark').css("left", position - 50);
});


$('#animation').animate({
    width: "200",
    height: "200"
}, 2000).animate({
    width: 100,
    height: 100
}, 2000);

jsfiddle.net

请提出建议。

Answer 1

你需要做一些Math，宝贝！具体来说，abs 函数可用于计算您距离中点的距离。使用以下方法计算与中心线的距离：

var timelineWidth = $('#timeline').width;
var dist = Maths.abs((width/2) - e.ClientX); // distance from the middle

您的最终函数将如下所示：

$('#timeline').mousemove(function(e){
    var timelineWidth = $('#timeline').width();
    var position = e.clientX;
    /* Calculate the distance from the mid-point */
    var dist = Math.abs((position - 50) - timelineWidth/2);
    /* Work out the percentage increase needed for your square */
    var squareSide = ((timelineWidth-dist)/timelineWidth) * 200;
    $('#mark').css("left", position - 50);
    /* Apply the transformation to your square */
    $('#animation').height(squareSide);
    $('#animation').width(squareSide);
});

希望有帮助！