How to skew an image in jquery instead of decreasing width?

How to skew an image in jquery instead of decreasing width?

I am trying to use jquery to play around with an image gallery.
I have an issue where i cannot skew images. The image div reduces in width
and the content is lost. What i want is the image to be skewed instead or
cropped.
Check the fiddle to see what i mean. Also note that this probably can be
done in CSS, however this is part of something bigger so I need a jQuery
solution only.
FIDDLE
JQuery
$(document).ready(function () {
$('#slider li').animate({
width: 150 + 'px'
}, 1500);
});