Question

Anyone ever found a jQuery hide() easing function that can go to certain X & Y coordinates? To make it look like it’s being thrown? Because the default hide(“slow”) will go to the top left (I believe), not to a certain position.

Answer 1

Combine two animations together – hide, which changes height and width to 0, and animate change of marginLeft and marginRight to desired value, or maybe make whole new animation, like.

Example one:

HTML:

<img id='book' src="http://media.thelogomix.com/preset_9/stack.jpg" />

Javascript:

$('#book').toggle(function(){
    $(this).animate({
        height: '100',
        marginLeft: '+=300',
        marginTop: '+=300',
    }, 500, function() {
    });
}, function(){
    $(this).animate({
        height: '400',
        marginLeft: '-=300',
        marginTop: '-=300',
    }, 500, function() {
    });
});

CSS:

#book {
    position: absolute;
}

Another example