Question

I would like the div to run this animation while the mouse travels on the timeline. The div starts with width/height 100px when the mouse approaching the half of timeline, the div been resized simultaneously to width/height 200px. and when the mouse gets closer to the end of the timeline returns to 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

Please suggest.

Answer 1

You need to do some Math, baby! Specifically, the abs function can be used to work out how far from the mid-point you are. Use the following to work out the distance from the centreline:

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

Your final function would then look something like this:

$('#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);
});

Hope that helps!