1

マウスがタイムライン上を移動している間、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

提案してください。

4

1 に答える 1

0

あなたはいくつかのことをする必要があります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);
});

お役に立てば幸いです。

于 2013-02-05T14:00:58.147 に答える